vansh bajaj

I had the same problem Can you please help me import Name from "./Name"; import gsap from "gsap"; import { useLayoutEffect } from "react"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Home = () => { const text1 = Array.from("I'm "); const text2 = Array.from("Vansh"); const text3 = Array.from(" bajaj"); useLayoutEffect(() => { const ctx = gsap.context(() => { gsap.utils.toArray("#home").forEach((home) => { console.log(home.offsetWidth); // console.log(gsap.utils.("#home")); gsap.fromTo( home, { opacity: 1, }, { opacity: 0, scrollTrigger: { trigger: home, // markers: true, start: "center center", end: () => "+=" + (home.offsetHeight * 2), scrub: true, pin: true, pinSpacing: false, }, } ); }); }); return () => { ctx.revert(); }; }, []); return ( <div className="myInfo-container section" id="home"> <div className="bgImg"> <img src="Images/IMG_1337.jpg" alt="my pic" /> </div> <div className="nameTextDiv"> <h1 className="green">Hii</h1> <h1> <span> {text1.map((ch, index) => { return <Name char={ch} key={index} />; })} </span> <span> {text2.map((ch, index) => { return <Name char={ch} key={index} />; })} </span> <span> {text3.map((ch, index) => { return <Name char={ch} key={index} />; })} </span> </h1> <p>Full stack web developer</p> </div> </div> ); }; export default Home;