Javascript 如何在向上滚动 gsap ScrollTrigger 时禁用滚动触发器

function animateFrom(elem, direction) {
  if (elem.played === true) {
    return;
  }
  elem.played = true;
  direction = direction || 1;
  var x = 0,
    y = direction * 100;
  if (elem.classList.contains("gs_reveal_fromLeft")) {
    x = -100;
    y = 0;
  } else if (elem.classList.contains("gs_reveal_fromRight")) {
    x = 100;
    y = 0;
  }
  elem.style.transform = "translate(" + x + "px, " + y + "px)";
  elem.style.opacity = "0";
  gsap.fromTo(elem, {
    x: x,
    y: y,
    autoAlpha: 0
  }, {
    duration: 1.5,
    x: 0,
    y: 0,
    autoAlpha: 1,
    ease: "expo",
    overwrite: "auto"
  });
}

function hide(elem) {
  gsap.set(elem, {
    autoAlpha: 0
  });
}

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);

  gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
    hide(elem); // assure that the element is hidden when scrolled into view

    ScrollTrigger.create({
      trigger: elem,
      markers: false,
      onEnter: function() {
        animateFrom(elem)
      },
      // onEnterBack: function() { animateFrom(elem, -1) },
      // onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
    });
  });
});

.gs_reveal {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js" integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div class="container">
  <div class="py-5">
    <h1 class="gs_reveal text-center">Scroll down and up to see different reveal animations</h1>
  </div>

  <div class="">
    <div class="row py-5">
      <div class="col-5 gs_reveal gs_reveal_fromLeft">
        <div class="d-block">
          <img src="https://picsum.photos/479/479?index=1" alt="" class="img-fluid">
        </div>
      </div>
      <div class="col-7">
        <h2 class="gs_reveal">Create amazing svg animations</h2>
        <p class="gs_reveal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia doloribus, inventore rem, at pariatur asperiores minus qui accusantium quod nisi! Modi eveniet eaque enim totam deserunt dolores alias aliquid.</p>
      </div>
    </div>

    <div class="row py-5">
      <div class="col-7 text-end">
        <h2 class="gs_reveal">Supercharge immersive WebGL experiences</h2>
        <p class="gs_reveal"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam praesentium numquam fugiat consequatur aliquid eos assumenda natus deserunt eum doloribus quia mollitia omnis, voluptatem maiores dicta exercitationem veritatis magnam iusto in
          officiis reiciendis ipsum, delectus maxime? Sit eligendi temporibus dolores? </p>
      </div>

      <div class="col-5 gs_reveal gs_reveal_fromRight">
        <div class="d-block">
          <img src="https://picsum.photos/479/479?index=2" alt="" class="img-fluid">
        </div>
      </div>
    </div>

    <div class="row py-5">
      <div class="col-5 gs_reveal_fromLeft">
        <div class="block">
          <img src="https://picsum.photos/479/479?index=3" alt="" class="img-fluid">
        </div>
      </div>

      <div class="col-7 text-start">
        <h2 class="gs_reveal">Control performant Canvas animations</h2>
        <p class="gs_reveal"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nulla natus minus praesentium, adipisci quam distinctio recusandae accusamus similique aut velit iusto reprehenderit deleniti! Nobis?</p>
      </div>
    </div>

    <div class="row py-5">
      <div class="col-7 text-end">
        <h2 class="gs_reveal">Award winning websites</h2>
        <p class="gs_reveal"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vero temporibus deleniti qui rem ipsa! </p>
      </div>

      <div class="col-5 gs_reveal gs_reveal_fromRight">
        <div class="d-block">
          <img src="https://picsum.photos/479/479?index=4" alt="" class="img-fluid">
        </div>
      </div>
    </div>

  </div>

</div>