ScrollTrigger.js
基本的な動き

<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js"></script>

gsap.to('.js-demo-section', { //アニメーションしたい要素を指定
  x: 800, //横に800px動かす
  scrollTrigger: {
    trigger: '.js-trigger',//アニメーションが始まるトリガーとなる要素
    start: 'top center', //アニメーションが始まる位置
    markers: true,
  }
});

<div class="d-demo">
   <section class="d-demo__section d-demo__section--bg">
       <div class="d-demo__main js-trigger">
          <div class="d-demo__wrap">
            <div class="d-demo__elem js-demo-section"></div>
          </div>
       </div>
   </section>
</div>