I've used the GSAP ScrollTrigger animation with ScrollTween to achieve the one page scrolll feature.
There is one property called scrollTo: {y: i * window.innerHeight, autoKill: false}.
- If i used the autoKill as false then jerk issues happening if we do the fast scroll but one page scroll works fine with slow scroll behaviour.
- If i used the autoKill as true then jerk issue resolved while we do the fast scroll but one page scroll animation broken.
Here Snippet for it:
let scrollTween: gsap.core.Tween;
const goToSection = (i: number) => {
scrollTween = gsap.to(window, {
scrollTo: {y: i * window.innerHeight, autoKill: false},
duration: 1,
onComplete: () => {
scrollTween = null;
},
overwrite: true,
});
};
useEffect(() => {
const panels = gsap.utils.toArray('.scroll_sections');
panels.forEach((panel, i) => {
ScrollTrigger.create({
trigger: panel,
start: 'top bottom',
end: '+=200%',
scrub: 1,
onToggle: (self) => {
self.isActive && !scrollTween && goToSection(i);
},
});
});
}, []);
Thanks,