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

特定の位置で固定して、
アニメーションする

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: 'center center', //アニメーションが始まる位置
    end: '+=1000', //アニメーション開始位置から1000px固定する
    pin: true, //トリガー要素を固定する
    scrub: 1, //1秒間余韻で動く
    markers: true,
  },
  stagger: {
    from: "random", //左からアニメーション 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>
</div>