GSAP Web制作 JavaScript

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

2023年9月18日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

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

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

あわせて読みたい
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説

続きを見る

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

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

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

あわせて読みたい
inview.jsでスクロールして表示領域に入ったらフェードインさせる方法【jQueryプラグイン】
inview.jsでスクロールして表示領域に入ったらフェードインさせる方法【jQueryプラグイン】

続きを見る

 

ScrollTriggerをCDNで読み込む方法

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

GreenSock | Docs | Installation

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

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

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

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

  1. CDNのタブを選択
  2. ScrollTrirrerにチェックを入れる
  3. コピーアイコンをクリックしてコードをコピー
  4. HTMLファイルのbody閉じタグ手前に貼り付ける

以下でもコピーできますが、確実に最新バージョンを使うなら公式サイトからコピーして下さい(以下は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だけでは使えません)

これから自分で書くJavaScriptのファイルはGSAPのCDNより後に読み込んで下さい。

 

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のプロパティとアニメーションのサンプル

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

プロパティ名意味単位初期値
triggerアニメーションのトリガー要素を指定なしなし
startアニメーション開始位置文字列、%top bottom
endアニメーション終了位置文字列、%bottom top
markersマーカー表示真偽値false
toggleActionsアニメーション開始のタイミングと
動き方を指定
文字列play none none none
scrubスクロール量に合わせてアニメーション真偽値false
pin要素を固定真偽値false

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

 

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.

これは、

  • scroller-startとstartが重なったらアニメーション開始
  • scroller-endとendが重なったらアニメーション終了

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

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

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

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

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

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

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

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

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

 

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

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

startで設定可能な値

  • top
  • center
  • bottom
  • %(上からの位置)

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

start: "top center"のイメージ

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はこの後に解説するtoggleActionsscrubで必要になります。

 

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つの値がありますが、これはそれぞれアニメーション開始のタイミングとなります。

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

  1. onEnter:startで要素の位置がscroller-startの下から上に移動した時
  2. onLeave:endで要素の位置がscroller-endの下から上に移動した時
  3. onEnterBack:endで要素の位置がscroller-endの上から下に移動した時
  4. onLeaveBack:startで要素の位置がscroller-startの上から下に移動した時

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

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

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

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

 

toggleActionsで指定できる値

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

toggleActionsで指定できる値

  • play:アニメーション開始(1つ目の初期値)
  • none:何もしない(2〜4つ目の初期値)
  • pause:一時停止
  • resume:アニメーションを再開
  • reset:アニメーション前の状態で停止
  • restart:最初に戻ってアニメーション開始
  • complete:アニメーション後の状態で停止
  • reverse:逆再生

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

 

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)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-GSAP, Web制作, JavaScript