javascript - 使用 fullpage.js 和 GSAP 使用触控板滚动时出现问题

Question

我正在为我的网站使用 GSAP 和 fullpage.js，所以如果您对此有任何经验，请帮助我。所以问题是当我用鼠标滚轮滚动时它按预期工作，但是当我用触控板滚动时我有一些“延迟”或不知道如何解释它，你可以在CodePen上看到。

fp-nav 也不起作用

提前致谢！

https://codepen.io/mrdisa97/pen/XWabqbO

JavaScript 代码：

class Utils {
  toArray(element) {
    return [].slice.call(element);
  }
  get(selector) {
    return document.querySelector(selector);
  }
}

(() => {
  let ready = false;
  let animationTimeout, transitionTimeout;

  const hideElements = () => {
    const seccondSection = get(".seccond");
    const thirdSection = get(".third");
    const first = get(".first").children;
    const seccond = get(".seccond").children;
    const third = get(".third").children;
    gsap.to([first, seccond, third], {
      autoAlpha: 0,
      duration: 0,
      y: 300,
    });
    gsap.to([seccondSection, thirdSection], {
      scale: 0.9,
    });
  };

  const animateIn = ({ currentIndex }) => {
    const { get } = new Utils();
    const firstSection = get(".first");
    const seccondSection = get(".seccond");
    const thirdSection = get(".third");
    const first = get(".first").children;
    const seccond = get(".seccond").children;
    const third = get(".third").children;
    if (currentIndex === 0) {
      gsap.to(first, {
        autoAlpha: 1,
        y: 0,
        duration: 0.5,
        ease: Power2,
      });
      gsap.to(firstSection, {
        scale: 1,
        ease: Power1,
        delay: 0.5,
      });
    }

    if (currentIndex === 1) {
      gsap.to(seccond, {
        autoAlpha: 1,
        y: 0,
        duration: 0.5,
        ease: Power2,
      });
      gsap.to(seccondSection, {
        scale: 1,
        ease: Power1,
        delay: 0.5,
      });
    }

    if (currentIndex === 2) {
      gsap.to(third, {
        autoAlpha: 1,
        y: 0,
        duration: 0.5,
        ease: Power2,
      });
      gsap.to(thirdSection, {
        scale: 1,
        ease: Power1,
        delay: 0.5,
      });
    }
  };

  const animateOut = ({ currentIndex, direction }) => {
    const { get } = new Utils();
    const firstSection = get(".first");
    const seccondSection = get(".seccond");
    const thirdSection = get(".third");
    const first = get(".first").children;
    const seccond = get(".seccond").children;
    const third = get(".third").children;

    if (direction === "down") {
      if (currentIndex === 0) {
        gsap.to(first, {
          autoAlpha: 0,
          y: -200,
          duration: 0.5,
        });
        gsap.to(firstSection, {
          scale: 0.9,
          ease: Power1,
          duration: 0.5,
        });
      }

      if (currentIndex === 1) {
        gsap.to(seccond, {
          autoAlpha: 0,
          y: -200,
          duration: 0.5,
        });
        gsap.to(seccondSection, {
          scale: 0.9,
          ease: Power1,
          duration: 0.5,
        });
      }

      if (currentIndex === 2) {
        gsap.to(third, {
          autoAlpha: 0,
          y: -200,
          duration: 0.5,
        });
        gsap.to(thirdSection, {
          scale: 0.9,
          ease: Power1,
          duration: 0.5,
        });
      }
    } else {
      if (currentIndex === 0) {
        gsap.to(first, {
          autoAlpha: 0,
          y: 200,
          duration: 0.5,
        });
        gsap.to(firstSection, {
          scale: 0.9,
          ease: Power1,
          duration: 0.5,
        });
      }

      if (currentIndex === 1) {
        gsap.to(seccond, {
          autoAlpha: 0,
          y: 200,
          duration: 0.5,
        });
        gsap.to(seccondSection, {
          scale: 0.9,
          ease: Power1,
          duration: 0.5,
        });
      }

      if (currentIndex === 2) {
        gsap.to(third, {
          autoAlpha: 0,
          y: 200,
          duration: 0.5,
        });
        gsap.to(thirdSection, {
          scale: 0.9,
          ease: Power1,
          duration: 0.5,
        });
      }
    }
  };

  const fullPage = new fullpage("#fullpage", {
    navigation: true,
    navigationPosition: "right",
    css3: true,
    afterLoad: function (origin, destination, direction) {
      animateIn({ currentIndex: destination.index });
    },
    onLeave: function (origin, nextIndex, direction) {
      if (ready) return;
      clearTimeout(animationTimeout);
      clearTimeout(transitionTimeout);

      animateOut({ currentIndex: origin.index, direction });
      animationTimeout = setTimeout(() => {
        ready = true;
        if (direction === "down") {
          fullpage_api.moveSectionDown();
        } else {
          fullpage_api.moveSectionUp();
        }
      }, 300);

      transitionTimeout = setTimeout(() => {
        ready = false;
      }, 300);

      return ready;
    },
  });
  const { toArray, get } = new Utils();
  hideElements();
})();