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();
});
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();
});
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
