夢みるゴリラ
夢みるゴリラ

それぞれ交差するタイミングで
アニメーションする
（ループ処理の場合）

headに書くこと

<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>

JavaScriptで書くこと

gsap.set('.js-demo-section04', {autoAlpha: 0, y:50}); 

const elems = document.getElementsByClassName('js-demo-section04');

for (let i = 0; i < elems.length; i++) {
  gsap.to(elems[i], {
    y: 0,
    autoAlpha: 1,
      scrollTrigger: {
        trigger: elems[i],
        start: 'top center',
        markers: true,
       }
  }); 
}

HTMLで書くこと

<div class="d-demo">
   <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 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>