スクロール追従で画像が切り替わるアニメーション

こんにちは、KNAPの足立です。
今回はgsapを使用してスクロール追従で画像が切り替わるアニメーションを実装したのでその方法を書いていこうと思います。

実装はこちら

See the Pen clippath_scroll by knap_develp (@knap_develp) on CodePen.

画像の固定

    gsap.to(".js-pin", {
      scrollTrigger: {
        trigger: ".js-pin",
        start: 'top top',
        end: 'bottom bottom',
        pin: true,
        pinSpacing: false,
      },
    });

画像の固定はscrollTriggerのpinを使用して固定しています。

画像の固定するスクロール量の調整

    const mag = 2;
    const imgItems = document.querySelectorAll(".l-scroll_img_item img");
    const commonHeight = imgItems.length * 100 * mag;
    document.documentElement.style.setProperty("--commonHeight", `${commonHeight}vh`);

:root {
  --commonHeight: 100vh;
}

.l-scroll_img_wrapper {
  position: relative;
  height: var(--commonHeight);
  margin-bottom: 30vh;
}

どのくらいのスクロール量の画像固定を行うかを計算します。今回は画面の高さx2x4枚分の高さ固定するようにカスタム変数の–commonHeightに代入します。
またmag変数の数値を増加することで画像固定のスクロール量を延ばすことができます

clip-pathアニメーションの発火タイミングの調整

    document.querySelectorAll('.js-clip').forEach((item,index) => {
      gsap.to(item, {
        clipPath: 'polygon(0 0%, 100% 0%, 100% 100%, 0% 100%)',
        scrollTrigger: {
          trigger: item,
          start: `top+=${window.innerHeight * index * mag}px`, 
          end: `top+=${window.innerHeight * (index +1) * mag}px`, 
          scrub: .5, 
        },
      });
    });

forEachで各.js-clipクラスに対しアニメーションの開始地点と終了地点を設定します。
index引数が何番目のjs-clipを表すので、そのおかげで開始地点(srart)と終了地点(end)を個々に調整することができます。
またscrubに数値を入れることでゆったりとスクロールに連動してアニメーションしてくれるようになります。

以上です！
では本日はこのへんで〜