andrisuvorov

Indeed, i made a silly mistake with ${mainRef.current} as this returns the element object. But, if i understand correctly, then i can safely call functions from within useGSAP with defined scope and all these functions that target elements, will still respect the scope from useGSAP? If that is so, then i can call my functions as i did and i can just use "standard" selector without messing with ref passing. Thank you, Jack from GreenSock 🤝🏻

Hello dear GSAP community. I face a challenge, trying to use "useGSAP" hook and define one reference to main element as scope. I would like to call functions from useGSAP hook but... i still want to respect scope for element selectors. When i target any element to perform .to(), i would like to search that element inside my scope. Currently i feel like i am breaking the code with given approach and once i call functions outside useGSAP then scope is also lost. Can someone aid me with this logic to make right decisions. Thank you to all great professionals out there 🙏 const Home = () => { const mainRef = useRef(null); ... // example of usage const func1 = (tl: Timeline, mainRef: MainRefType) => { const homeIntroSubTitle = `${mainRef.current} .home__intro h2`; const homeIntroButton = `${mainRef.current} .home__intro-button`; const homeFeatureItem = `${mainRef.current} .home__feature-item`; gsap.set([homeIntroSubTitle, homeIntroButton, homeFeatureItem], { y: -10, opacity: 0 }); tl.to(homeIntroSubTitle, { y: 0, opacity: 1, duration: 1 }, 0); tl.to(homeIntroButton, { y: 0, opacity: 1, duration: 1 }, 0); tl.to(homeFeatureItem, { y: 0, opacity: 1, duration: 1, stagger: 0.3 }, 0); } useGSAP(() => { const tl = gsap.timeline(); func1(tl, mainRef); func2(mainRef); func3(mainRef); }, { scope: mainRef }); return ( <main className='home' ref={mainRef}> ... ) }