Search the Community
Showing results for tags 'passing scope'.
Found 1 result
-
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}> ... ) }
