スクロールすると要素が奥行きを持って立体的に重なるアニメーション

  .item {
    width: 100%;
    /* 高さの指定は必須ではない */
    height: 75vh;
    background-color: #ddd;
  }

  const items = gsap.utils.toArray("[data-item]"); // data-item属性を持つ要素を配列として取得
  const wrapper = document.querySelector("[data-wrapper]"); // data-wrapper属性を持つ要素を取得

  gsap.to(items[0], {
    // itemsの最初の要素をアニメーションさせる
    y: "250%", // y軸方向に250%移動（下方向）
    scale: 0.82, // サイズを0.82倍に縮小
    ease: "none", // イージング関数を指定しない（線形アニメーション＝linear）
    scrollTrigger: {
      // スクロールトリガーの設定
      trigger: items[0], // アニメーション開始のトリガー要素
      endTrigger: wrapper, // アニメーション終了のトリガー要素
      start: "center top+=50%", // トリガー要素の中央がビューポートの上から50%の位置に来たら開始
      end: "bottom top+=50%", // 終了のトリガー要素の底部がビューポートの上から50%の位置に来たら終了
      scrub: true, // スクロール量に応じてアニメーションを滑らかに制御
    },
  });

  // items[1],items[2]の処理が続く