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

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

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", {opacity:0,y: 100}); //初期状態をセット

ScrollTrigger.batch(".js-demo-section04", {
  onEnter: batch => gsap.to(batch, {opacity: 1, y: 0,}),
  start: "top 50%",
  once: true,
  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>