Panel swiper using GSAP scrollTo and ScrollTrigger

scroll-to-gsap

export function FilmsPage() {
  const mainCont = useRef();
  const scrollTween = useRef();

  const { contextSafe } = useGSAP(() => {
    const panels = gsap.utils.toArray('.prv-sect');

    panels.forEach((panel, i) => {
      ScrollTrigger.create({
        trigger: panel,
        markers: true,
        start: 'top bottom',
        // end: '+=200%',
        onToggle: ((self) => {
          return (self.isActive && !scrollTween.current && goToSection(i))
        }),
        id: 'sect-' + i,
      });
    });
    ScrollTrigger.normalizeScroll(true);
    return () => {
      if (scrollTween.current) {
        scrollTween.current.kill();
      }
    };
    //// just in case the user forces the scroll to an inbetween spot (like a momentum scroll on a Mac that ends AFTER the scrollTo tween finishes):
    // ScrollTrigger.create({
    //   start: 0,
    //   end: 'max',
    //   snap: 1 / (panels.length - 1),
    //   onToggle: ((self) => {
    //     if(self.isActive) {
    //       setIsCursorVisible(false);
    //       document.body.style.cursor = 'none';
    //     } else {
    //       document.body.style.cursor = 'default';
    //     }
    //   }),
    // });
  },
    { scope: mainCont }
  );

  const goToSection = contextSafe((i) => {
    scrollTween.current = gsap.to(window, {
      scrollTo: { y: i * window.innerHeight, autoKill: false },
      duration: 1,
      ease: "power2.inOut",
      id: 'scrollTween',
      onComplete: (() => {
        return (scrollTween.current = null);
      }),
      overwrite: true,
    });
  });