Shaperwy
Shaperwy
KPCKevin Powell - Community
Created by Shaperwy on 11/30/2023 in #front-end
GSAP scrollTrigger always snaping to first element in React
Im looking for someone that has some experience with GSAP animation. Im working on my personal project, however i am encountering this problem with GSAP scrollTrigger and scrollSmoother. Problem is that my React app is always snaping to first element on the page , and im trying to achieve the whole page 'slider' effect where he can scroll through the slides but in very smooth way. I achieved all that except this last part where I want to make the scrolling smooth HTML is only 5 sections My react logic: useEffect(() => { let ctx = gsap.context(() => { ScrollSmoother.create({ smooth: 1, effects: true, wrapper: pageWrapper.current, content: pageContent.current, // smoothTouch: 0.1, // normalizeScroll: true, // ignoreMobileResize: true, }); ScrollTrigger.create({ trigger: firstPanelRef.current, // start: "top top", pin: firstPanelContentRef.current, pinSpacing: false, snap: { snapTo: 1, duration: 0.4, delay: 0, ease: "circ.out", }, }); ScrollTrigger.create({ trigger: seacondPanelRef.current, // start: "top top", pin: seacondPanelContentRef.current, pinSpacing: false, snap: { snapTo: 1, duration: 0.4, delay: 0, ease: "power1.inOut", }, }); ScrollTrigger.create({ trigger: thirdPanelRef.current, // start: "top top", pin: thirdPanelContentRef.current, pinSpacing: false, snap: { snapTo: 1, duration: 0.4, delay: 0, ease: "power1.inOut", }, }); }, [ firstPanelRef, firstPanelContentRef, seacondPanelRef, seacondPanelContentRef, thirdPanelRef, thirdPanelContentRef, pageWrapper, pageContent, ]); return () => ctx.revert(); });
1 replies