【GSAP】パララックスをScrollTriggerを使って実装する方法【アニメーションのサンプルあり】

<div class="container js-trigger">
  <div class="box box01"></div>
  <div class="box box02"></div>
  <div class="box box03"></div>
  <div class="box box04"></div>
  <div class="box box05"></div>
</div>

gsap.fromTo(
  ".box02", // アニメーションさせる要素
  {
    yPercent: 100, // 下に要素の幅の1倍分移動
  },
  {
    yPercent: -100, // 上に要素の幅の1倍分移動
    ease: "none", // イージングなし
    scrollTrigger: {
      trigger: ".js-trigger", // アニメーションのトリガー要素
      start: "top bottom", // アニメーション開始位置
      end: "bottom top", // アニメーション終了位置
      scrub: true, // 動作を遅くさせない
    },
  }
);
gsap.fromTo(
  ".box03", // アニメーションさせる要素
  {
    yPercent: 200, // 下に要素の幅の2倍分移動
  },
  {
    yPercent: -200, // 上に要素の幅の2倍分移動
    ease: "none", // イージングなし
    scrollTrigger: {
      trigger: ".js-trigger", // アニメーションのトリガー要素
      start: "top bottom", // アニメーション開始位置
      end: "bottom top", // アニメーション終了位置
      scrub: 1, // 動作が遅くなる
    },
  }
);
gsap.fromTo(
  ".box04", // アニメーションさせる要素
  {
    yPercent: 300, // 下に要素の幅の3倍分移動
  },
  {
    yPercent: -300, // 上に要素の幅の3倍分移動
    ease: "none", // イージングなし
    scrollTrigger: {
      trigger: ".js-trigger", // アニメーションのトリガー要素
      start: "top bottom", // アニメーション開始位置
      end: "bottom top", // アニメーション終了位置
      scrub: 2, // 動作が遅くなる
    },
  }
);
gsap.fromTo(
  ".box05", // アニメーションさせる要素
  {
    yPercent: 400, // 下に要素の幅の4倍分移動
  },
  {
    yPercent: -400, // 上に要素の幅の4倍分移動
    ease: "none", // イージングなし
    scrollTrigger: {
      trigger: ".js-trigger", // アニメーションのトリガー要素
      start: "top bottom", // アニメーション開始位置
      end: "bottom top", // アニメーション終了位置
      scrub: 3, // 動作が遅くなる
    },
  }
);

// セレクタ ".js-trigger" で要素を取得
const items = gsap.utils.toArray(".js-trigger");

// 各要素に対してアニメーションを設定
items.forEach((item) => {
  gsap.fromTo(
    item.querySelector("img"), // アニメーションを適用する画像要素を取得
    {
      yPercent: 0, // パララックス前の要素の位置
    },
    {
      yPercent: -20, // 上に要素の幅の1/5分移動
      ease: "none", // イージングなし
      scrollTrigger: {
        trigger: item, // アニメーションのトリガー要素
        start: "top bottom", // アニメーション開始位置
        end: "bottom top", // アニメーション終了位置
        scrub: 1, // 動作を遅らせる
      },
    }
  );
});