Hello guys,
I am in need of some dire help. I am trying to implement a scrolltrigger effect with snapping exactly like the GSAP codepen demo here, but in React / Next JS. I been working on it for days trying to implement on a website. I also created a mini codesandbox demo with the effect, but as you see, the behavior snapping and scroll is not the same. I was wondering if I could get some assistance.
Sandbox link: https://codesandbox.io/s/festive-babycat-b8lh74?file=/pages/_app.js
useEffect(() => {
let panels = gsap.utils.toArray(".panel");
let scrollTween;
function scrollTo(arg) {
return { y: arg * innerHeight, autoKill: false };
}
function goToSection(i) {
scrollTween = gsap.to(window, {
scrollTo: () => {
scrollTo(i);
console.log(i);
},
duration: 1,
onComplete: () => (scrollTween = null),
overwrite: true
});
}
panels.forEach((panel, i) => {
ScrollTrigger.create({
trigger: panel,
start: "top bottom",
markers: true,
onToggle: (self) => self.isActive && !scrollTween && goToSection(i)
});
ScrollTrigger.create({
start: 0,
end: "max",
snap: 1 / (panels.length - 1)
});
});
}, []);