複数の要素を
アニメーションする

<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, .js-demo-section02, .js-demo-section03', { 
  x:800,
  scrollTrigger: {
    trigger: '.js-trigger',
    start: 'top center',
markers: true,
  }
});

/*--２つ目の例 --*/
gsap.to('.js-demo-section04', {
 x: 150,
 scrollTrigger: {
    trigger: '.js-trigger2',
    start: 'top center'
  },
  stagger: {
    from: "start", //左からアニメーション start、center、edges、random、endが指定できる
    amount: 0.3 //0.３秒ズラしてアニメーション
     }
});

<div class="d-demo">
<!--１つ目の例 -->
   <section class="d-demo__section d-demo__section--bg d-demo__section--lg">
       <div class="d-demo__main js-trigger">
          <div class="d-demo__wrap">
            <div class="d-demo__elem js-demo-section"></div>
             <div class="d-demo__elem d-demo__elem--color1 js-demo-section02"></div>
            <div class="d-demo__elem d-demo__elem--color2 js-demo-section03"></div>
          </div>
       </div>
   </section>
<!--２つ目の例 -->
   <section class="d-demo__section">
       <div class="d-demo__main js-trigger2">
          <div class="d-demo__wrap d-demo__wrap--wrap">
             <div class="d-demo__elem js-demo-section04"></div>
             <div class="d-demo__elem d-demo__elem--color1 js-demo-section04"></div>
            <div class="d-demo__elem d-demo__elem--color2 js-demo-section04"></div>
            <div class="d-demo__elem js-demo-section04"></div>
             <div class="d-demo__elem d-demo__elem--color1 js-demo-section04"></div>
            <div class="d-demo__elem d-demo__elem--color2 js-demo-section04"></div>
          </div>
       </div>
   </section>
</div>