我在 reactJS 中使用 GSAP 和 locoScroll，如何检查触发点值？

问：

这是我所做的功能。我所针对的元素仅在页面被重新放置时移动。

我想将元素 #moveLeft 移动，#moveRight 当滚动从顶部达到 27% 时，当我们向上滑动时，元素必须移回原来的位置。

useEffect(() => {
    // smoothning scroll
    const locoScroll = new LocomotiveScroll({
      el: document.querySelector(".main"),
      smooth: true,
    });

    gsap.registerPlugin(ScrollTrigger);

    //syncronizing scrolls
    locoScroll.on("scroll", ScrollTrigger.update);

    ScrollTrigger.scrollerProxy(".main", {
      scrollTop(value) {
        return arguments.length
          ? locoScroll.scrollTo(value, 0, 0)
          : locoScroll.scroll.instance.scroll.y;
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight,
        };
      },
      pinType: document.querySelector(".main").style.transform
        ? "transform"
        : "fixed",
    });

    //initialinzing elements to be moved
    gsap.set("#moveLeft", { x: 0, y: 0, opacity: 1 });
    gsap.set("#moveRight", { x: 0, y: 0, opacity: 1 });

    //motion of the elements
    let tl = gsap
      .timeline({ defaults: { ease: "none" } })
      .to("#moveLeft", { x: -90 })
      .to("#moveRight", { x: 90 }, 0);

    //time of movement of elements
    ScrollTrigger.create({
      trigger: "#moveLeft",
      scroller: ".main",
      start: "top 30%",
      end: "top 0",
      animation: tl,
    });

    ScrollTrigger.create({
      trigger: "#moveRight",
      scroller: ".main",
      start: "top 30%",
      end: "top 0",
      animation: tl,
    });

    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
    ScrollTrigger.refresh();
  }, []);