I'm using GSAP and locoScroll with reactJS, how can i check the trigerring point value?

Question

This is my function that i made. The elements which i'm targeting moves only when the page is reloded.

I wanted to move the elements #moveLeft and #moveRight when the scroll reaches 27% from top and when we slide back up the elements must move back to their original place.

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();
  }, []);