GSAPスクロールアニメーションまとめ

[1]基本アニメーション + markers

要素が右へ移動します。マーカーで開始・終了位置を視覚化します。

HTML

<div class="box" id="box1"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
}

JavaScript

gsap.to("#box1", {
  x: 300, // X方向に300px移動
  scrollTrigger: {
    trigger: "#box1",        // この要素がトリガー
    start: "top center",     // 要素topがビューポートcenterに来たら開始
    end: "bottom top",       // 要素bottomがビューポートtopに来たら終了
    markers: markersEnabled, // デバッグON/OFF
  }
});

[2]scrub連動（スクロール同期）

スクロール量に応じて要素が回転します。戻すと逆回転。

HTML

<div class="box" id="box2"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
}

JavaScript

gsap.to("#box2", {
  rotation: 360, // 360度回転
  scrollTrigger: {
    trigger: "#box2",
    start: "top center",
    end: "bottom top",
    scrub: true,          // スクロール進行に連動
    markers: markersEnabled,
  }
});

[3]pin（要素固定）

要素が固定され、拡大します。一定区間はその場に留まります。

HTML

<div class="box" id="box3"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
}

JavaScript

gsap.to("#box3", {
  scale: 2, // 2倍に拡大
  scrollTrigger: {
    trigger: "#box3",
    start: "top center",
    end: "+=500",         // 500pxスクロール分で終了
    pin: true,            // 要素固定
    markers: markersEnabled,
  }
});

[4]toggleActions（状態ごとの挙動）

進入・離脱・戻り時の挙動を指定します。

HTML

<div class="box" id="box4"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
}

JavaScript

gsap.to("#box4", {
  y: -200, // Y方向に-200px移動（上へ）
  scrollTrigger: {
    trigger: "#box4",
    start: "top center",
    end: "bottom top",
    toggleActions: "play reverse restart reset", 
    // onEnter, onLeave, onEnterBack, onLeaveBack の順
    markers: markersEnabled,
  }
});