スクロール量に応じて要素が縦に移動するアニメーション

<figure data-parallax-front>
  <img src="https://picsum.photos/800/500/?random=1" alt="画像" width="495" height="309"/>
</figure>

<figure data-parallax-front data-y="100px" data-delay="1">
  <img src="https://picsum.photos/800/500/?random=1" alt="画像" width="495" height="309"/>
</figure>

const items = document.querySelectorAll("[data-parallax-front]"); // data-parallax-front属性を持つ要素を取得

// 各要素に対して処理を行う
for (const item of items) {
  const y = item.getAttribute("data-y") ?? "15%"; // itemのdata-y属性を取得。未設定の場合は'15%'をデフォルト値として使用
  const delay = parseFloat(item.getAttribute("data-delay")) || 0.4; // itemのdata-delay属性を数値に変換して取得。未設定の場合は'0.4'をデフォルト値として使用
  const target = item.children; // itemの直下の要素を取得

  gsap.fromTo(
    // gsap.fromToでアニメーションを設定
    target, // 対象の要素をtargetで指定
    {
      y: y, // アニメーション開始時のy位置
    },
    {
      y: `-${y}`, // アニメーション終了時のy位置
      scrollTrigger: {
        // スクロールトリガーを設定
        trigger: item, // itemをトリガーとなる要素として指定
        start: "top bottom", // 要素の上端がビューポートの下端に達したときに開始
        end: "bottom top", // 要素の下端がビューポートの上端に達したときに終了
        scrub: delay, // スクロールに追従してアニメーションを行う（デフォルトでは0.4秒の遅延）
      },
      ease: "none", // イージング関数を指定しない（線形アニメーション）
    }
  );
}

const delay = parseFloat(item.getAttribute("data-delay")) || 0.4;

const target = item.children;