0

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,

0 Answers0