はじめに

今回は、GSAP（GreenSock Animation Platform）の中でも特に強力で楽しい**「ScrollTrigger」**プラグインについて解説します。

スクロールに合わせて要素を動かしたり、特定の場所で固定したりといったモダンな演出が驚くほど簡単に実装できるようになります。

1. ScrollTriggerの導入

ScrollTriggerを使用するには、GSAP本体とScrollTriggerプラグインの2つのファイルが必要です。

今回は手軽に試せるCDNでの導入方法をご紹介します。

以下のコードをHTMLのhead内、またはbodyの閉じタグ直前に貼り付けてください。

<!-- GSAP本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- ScrollTriggerプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

※バージョンが古い場合は公式サイトから最新のものを取得してください。

2. 基本的な使い方：要素が来たら動かす

まずは、特定の要素が画面内に入ったタイミングでアニメーションを開始させる基本の形です。

gsap.to(".box", {
  x: 200, // 右に200px動かす
  scrollTrigger: {
    trigger: ".scroll", // この要素が画面内に入ったら発火
    start: "top center", // トリガーの「上部」が画面の「中央」に来た時に開始
    markers: true // 開発用に開始/終了位置を画面に表示
  }
});

ソースコードも非常に直感的です。

特に start プロパティで「どのタイミングで動かすか」を細かく制御できるのが特徴です。

3. ScrollTriggerでよく使うプロパティ一覧

実装中によく参照する主要なプロパティをまとめました。

プロパティ	概要
trigger	アニメーションの基準（発火・終了位置）となる要素を指定
start	アニメーションを開始する位置を指定（例: "top center"）
end	アニメーションを終了する位置を指定
scrub	アニメーションとスクロールバーの動きを同期させる
pin	要素をその場に固定（ピン留め）する
markers	画面に開始・終了位置のインジケーターを表示（デバッグ用）

4. 表現を広げる応用テクニック

① スクロール量に同期させる（scrub）

scrub: true を設定すると、スクロールの進捗に合わせてアニメーションが進行します。

これを使うことで、スクロール量に合わせて要素をふわっと表示させるといった自然な演出が可能になります。

gsap.to(".box", {
  opacity: 1,
  y: 100,
  scrollTrigger: {
    trigger: ".scroll",
    scrub: true // スクロール量に合わせて連動 [3]
  }
});

② 要素を特定の位置で固定する（pin）

pin: true を使用すると、アニメーション開始位置（start）から終了位置（end）の間、要素を画面に固定できます。

gsap.to(".box1", {
  x: 400,
  scrollTrigger: {
    trigger: ".box1",
    start: "center center",
    end: "+=500", // 開始位置から500px分スクロールするまで固定 [3]
    pin: true
  }
});

まとめ

GSAPは非常に多機能ですが、このScrollTriggerをマスターするだけでも、サイトの表現力は格段にアップします。

まずは基本的なプロパティを組み合わせて、自分なりのアニメーションを作ってみてください！

【GSAP】初心者でも簡単！ScrollTriggerの基本的な使い方と実践テクニック