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

スクロール量に合わせて
アニメーションを進める

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.to('.js-demo-section', {
  x: 800,
  scrollTrigger: {
    trigger: '.js-trigger',
    start: 'top center' ,
    end: 'bottom center', 
    scrub: true, 
    markers: true,
  }
});

/*--２つ目の例 --*/
gsap.to('.js-demo-section2', {
  x: 800,
  scrollTrigger: {
    trigger: '.js-trigger2',
    start: 'top center' ,
    end: 'bottom center', 
    scrub: 2, //２秒間余韻で動く
    markers: true,
  },
  stagger: {
    from: "start", //左からアニメーション start、center、edges、random、endが指定できる
    amount: 0.1 //どのくらいの割合でズラすか
     }
});

HTMLで書くこと

<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-section"></div>
            <div class="d-demo__elem d-demo__elem--color2 js-demo-section"></div>
          </div>
       </div>
   </section>
<section class="d-demo__section">
       <div class="d-demo__main js-trigger2">
          <div class="d-demo__wrap">
            <div class="d-demo__elem js-demo-section2"></div>
             <div class="d-demo__elem d-demo__elem--color1 js-demo-section2"></div>
            <div class="d-demo__elem d-demo__elem--color2 js-demo-section2"></div>
          </div>
       </div>
   </section>
</div>