【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介

GSAPのScrollTriggerってプラグインを使うとスクロールアニメーションが作れるって本当？

軽量かつ高機能なJavaScriptのアニメーションライブラリ『GSAP』ですが、ただアニメーションさせるだけでなく、スクロールして表示領域に入ったらアニメーションを開始させることが可能です。

今回は、それをGSAPのプラグインの1つであるScrollTriggerを使った方法で解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

GSAPのスクロールアニメーションが作れるプラグイン『ScrollTrigger』の使い方

ScrollTriggerとはGSAPのプラグインなので、まずはGSAPを使う準備と基本的な使い方を学んでおきましょう。

GSAPの導入方法や基本的な使い方は以下の記事を参照下さい。

スクロールして表示領域に入ったらアニメーションを開始させるには、『inview.js』というjQueryのプラグインを使う方法もありますが、この方法はCSSを書く必要があります。

しかし、GSAPのScrollTriggerはアニメーションに関しては、CSSを書く必要がありません。

『inview.js』を使う方法は以下の記事を参照下さい。

ScrollTriggerをCDNで読み込む方法

これは冒頭でご紹介した記事に書いてあるGSAPの読み込み方法と同じですが、まずは以下のページにアクセスして下さい。

GreenSock | Docs | Installation

少しスクロールするとこちらが表示されます。

GSAP：ScrollTrirrerにチェックしてCDNのコードをコピー

そして以下の手順で進めて下さい。

以下でもコピーできますが、確実に最新バージョンを使うなら公式サイトからコピーして下さい（以下は2024年2月28日現在の最新です）

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

コピーしたコードを貼る場所は、body閉じタグの手前にします。

    <!-- GSAP CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <!-- GSAP ScrollTrirrer CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <!-- 自作JSファイル(GSAPより後に書く) -->
    <script src="js/main.js"></script>
  </body>
</html>

これでGSAPとScrollTriggerを使う準備は完了です（ScrollTriggerだけでは使えません）

ScrollTriggerの基本的な書き方とアニメーションのサンプル

まずは基本となるGSAPアニメーションはこちら（右下のRerunをクリックすれば最初から動きます）

See the Pen
GSAP（基本） by junpei (@junpei-sugiyama)
on CodePen.

コードは必要最小限としています。

<div class="container">
  <div class="box"></div>
</div>

gsap.to(".box", {
  x: 100, // 100px右に移動
});

これにScrollTriggerを加えるとこのような書き方になります。

gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    trigger: ".box", // アニメーション開始のトリガー要素
    start: "top center", // アニメーション開始位置
  },
});

今回は分かりやすくアニメーションさせたい要素のclass名をそのまま使っていますが『アニメーションで使うclass名』というのが分かるように、以下のようにclass名を分けて書くのもおすすめです。

<div class="container">
  <div class="box js-trigger"></div>
</div>

gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    trigger: ".js-trigger", // アニメーション開始のトリガー要素
    start: "top center", // アニメーション開始位置
  },
});

そしてstart: "top center"はアニメーションの開始位置になります。

start: "トリガー要素の位置 画面の位置",

つまりstart: "top center"は『"トリガー要素のトップ"が"画面の中央"に来たらアニメーション開始』という意味になります。

こちらがサンプルです（ゆっくりスクロールして下さい）

See the Pen
GSAP（ScrollTrigger） by junpei (@junpei-sugiyama)
on CodePen.

ScrollTriggerのプロパティとアニメーションのサンプル

先ほど使ったプロパティはtriggerとstartだけですが、他にもプロパティはあるのでよく使うものだけご紹介します。

これらを使ったアニメーションの実装を解説していきます。

markers：アニメーションの開始・終了位置を表示

これは確認用となりますが、アニメーションがどこまでスクロールしたら開始するのか確認したい時はmarkersを使うとマーカーが表示されます。

gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    trigger: ".box", // アニメーション開始のトリガー要素
    start: "top center", // アニメーション開始位置
    markers: true, // マーカー表示
  },
});

サンプルはこちらです。

See the Pen
GSAP（ScrollTrigger・markers） by junpei (@junpei-sugiyama)
on CodePen.

これは、

となります（このサンプルではアニメーション終了の確認はできませんが）

こちらがトリガー要素のトップが画面の中央を過ぎる手前。

GSAP：トリガー要素のトップが画面の中央を過ぎる手前

そしてこちらがトリガー要素のトップが画面の中央を過ぎた直後。

GSAP：トリガー要素のトップが画面の中央を過ぎた直後

これでアニメーションの開始と終了の位置を確認できます。

ただしあくまでも確認用なので、実務で納品する前にはmarkersを削除するのを忘れないようにしましょう。

start：アニメーション開始位置を指定

先ほどはstart: "top center"でしたが、他にも設定可能です。

start: "top center"と2つ値がありますが、これは1つ目の値は『トリガー要素の位置』、2つ目の値は『画面の位置』となります。

start: "top center"のイメージ

これは要素のtopが画面のcenterを超えたらアニメーション開始となりますね。

また%で指定すればtop・center・bottom以外にも設定可能です。

例えば30%にすると画面上から30%の位置からアニメーションが開始されます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

end：アニメーション終了位置を指定

startとは逆にendを使うと終了位置を指定できます。

書き方はstartと同じで、以下の場合はend: "bottom 30%"なので『要素の下が画面上から30%の位置に到達したらアニメーション終了』となります。

gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    trigger: ".box", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    end: "bottom 30%", // アニメーションが終わる位置
    markers: true, // マーカー表示
  },
});

ただしこれだけでは画面上から30%にあるscroller-endに到達する前にアニメーションが終わってしまいます。

なので上記コードでは特に意味はありませんが、このendはこの後に解説するtoggleActionsとscrubで必要になります。

toggleActions：アニメーション開始終了位置を過ぎた後の処理を指定

これまでアニメーションは一度しか発火しませんでしたが、toggleActionsを使うと上にスクロールして戻った時や、アニメーション終了位置を過ぎたあとの処理を指定できます。

つまりスクロールを戻してアニメーションも戻すことが可能です。

例えばこちらは先ほどサンプルですが、一度スクロールしてアニメーションが発火したら上にスクロールしても元には戻りません。

See the Pen
GSAP（ScrollTrigger・markers） by junpei (@junpei-sugiyama)
on CodePen.

しかしtoggleActionsを使うと、上にスクロールすればアニメーションで動いた要素を戻せます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これは4行目のtoggleActionsを追記しただけです。

gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    toggleActions: "play none none reverse", // 上スクロールで戻る
    trigger: ".box", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    markers: true, // マーカー表示
  },
});

toggleActionsの初期値は"play none none none"ですが、4つ目をreverseにして逆再生にしています。

toggleActionsで指定できる位置

この"play none none none"は4つの値がありますが、これはそれぞれアニメーション開始のタイミングとなります。

それぞれ名前があり、左から順に以下のようになります。

言葉で見ても分かりにくいと思うので、サンプルで確認してみましょう。

ゆっくりスクロールしながら2つ目の色が変わったら、上にスクロールしてみて下さい。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ここで先ほど解説したendを使っています。

toggleActionsで指定できる値

toggleActionsで指定できる値は以下になります。

これは組み合わせが多過ぎするのでサンプルは割愛します。

scrub：スクロール量に合わせてアニメーション

これまでは指定したポイントでアニメーションの開始と終了が決まっていましたが、スクロール量に合わせてアニメーションさせることもできます。

ちょっとイメージしにくいかも知れませんが、先にサンプルでゆっくりスクロールを上下に繰り返してみて下さい。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

アニメーションが開始したらスクロールを止めても最後までいくのではなく、scroller-endにendが到達するまでスクロール量に合わせて動きます。

これは非常に簡単で、scrub: true,を追記するだけでOKです。

gsap.to(".box", {
  x: 200, // 200px右に移動
  borderRadius: "50%", // 正円
  backgroundColor: "#ffb6c1", // 背景色
  rotate: 360, // 360°回転
  scrollTrigger: {
    trigger: ".box", // アニメーションが始まるトリガーとなる要素
    start: "top 60%", // アニメーションが始まる位置
    end: "bottom 30%", // アニメーションが始まる位置
    markers: true, // マーカー表示
    scrub: true, // スクロール量に合わせてアニメーション
  },
});

pin：アニメーションが開始したら要素を固定する

pinを有効にするとアニメーション開始と同時に要素にposition: fixed;が付与されて固定されます。

そして要素のendがscroller-endを超えるまで固定されたままアニメーションを続け、scroller-endを超えたら固定解除になります。

コードはpin: true,を追記しただけです。

gsap.to(".box", {
  backgroundColor: "#ffb6c1", // 背景色
  borderRadius: "50%", // 正円
  rotate: 360, // 360°回転
  scrollTrigger: {
    toggleActions: 'play none none reverse',
    end: "bottom 30%", // アニメーションが終わる位置
    trigger: ".box", // アニメーションが始まるトリガーとなる要素
    start: "top 60%", // アニメーションが始まる位置
    markers: true, // マーカー表示
    scrub: true, // スクロール量に合わせてアニメーション
    pin: true, // 要素を固定
  },
});

サンプルはこちらです。

2つ目の要素がpin: true,になっているので、最後までゆっくりスクロールしてみて下さい。

See the Pen
GSAP（ScrollTrigger・pin） by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はGSAPのスクロールアニメーションを実装できるプラグイン、ScrollTriggerの使い方とアニメーションのサンプルをご紹介しました。

inview.jsと違ってCSSを書かずに実装できるので便利ですね。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！