お役立ちコラム
JavaScript

【GSAP】ScrollTriggerプラグインの使い方！スクロールとアニメーションを連動させる方法

公開日：

※本記事には広告が含まれます。

GSAPは、簡単にトゥイーン（始点と終点の間を補間するアニメーション）を作成できるJSライブラリですが、デフォルトではスクロールと連動していません。

しかし、ScrollTriggerプラグインを使うことで、以下のようにスクロールに合わせてアニメーションをさせることができます。

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

今回は、GSAPプラグイン「ScrollTrigger」を使ってアニメーションをスクロールと連動させる方法を解説します。

※本記事執筆時点のGSAPバージョンは、「3.13.0」です。ご利用の時期や環境によっては、内容が異なる場合がありますので、あらかじめご了承下さい。

ScrollTriggerのインストール方法

まずは、以下の3つの方法ごとにScrollTriggerのインストール方法を解説します。

  1. 公式サイトからファイルをダウンロードしてくる方法
  2. CDNを利用する方法
  3. npmを使う方法

公式サイトからファイルをダウンロードしてくる方法

公式サイトからファイルをダウンロードしてきてGSAPを使いたい場合は、以下のURLをクリックし「Get GSAP」をクリックします。

https://gsap.com/docs/v3/Installation

「Get GSAP」ボタン

そうすると、「gsap-public.zip」という名前のzipファイルがダウンロードされます。

中を開くと様々なフォルダが入っていますが、GSAPと一緒にScrollTriggerを使いたい場合は「gsap-public＞minified」の中に格納されている「gsap.min.js」ファイルと「ScrollTrigger.min.js」をscriptタグで読み込めばOKです。

なお、実際に使用する際はgsap.registerPlugin()メソッドでScrollTriggerを登録する必要があります。

 document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger)
  // ここからGSAPのアニメーションコードを記述
 });

※GSAPのコアファイルを先に読み込んでいる場合は、gsap.registerPlugin()メソッドを書かずとも自動的にプラグインが登録されることもありますが、基本的には明示的に登録することが推奨されています。

CDNを利用する方法

CDNを利用する場合は、以下のscriptタグを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

また、実際に使用する際はgsap.registerPlugin()メソッドでScrollTriggerを登録する必要があります。

 document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger)
  // ここからGSAPのアニメーションコードを記述
 });

npmを使う方法

npmを使っている場合は、ターミナルでnpm install 1gsapを実行することで、node_modulesにファイルがインストールされます。

また、実際に使用する際は、次のようにimport文で読み込む必要があります。

import { gsap } from "gsap";
    
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

ScrollTriggerの基本的な使い方

それでは今回は、以下のようなデモを作成しながらScrollTriggerの使い方を解説します。

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

スタート時点のファイル構成として、HTML・CSS・JavaScriptは以下の内容を使用します。

■HTML

<section class="sec01">
    <p>下へスクロールしてボックスを表示</p>
</section>

<section class="sec02">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</section>

<section class="sec03"></section>

■CSS

.sec01,
.sec03 {
  height: 1000px;
}

@media (max-width: 768px) {
  .sec01,
  .sec03 {
    height: 300px;
  }
}

.sec01 {
  text-align: center;
}

.sec02 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  height: 300px;
  background-color: #eee;
}

.box {
  width: 100px;
  height: 100px;
  background: #18c1f0;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(50px);
}

■JavaScript

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(
    ".box",
    {
      opacity: 1,
      y: 0,
      duration: 0.8,
      ease: "power2.out",
      stagger: 0.2, //各要素のアニメーション開始タイミングを0.2秒ずつずらして実行
    }
  );
});

GSAPの基本的な使い方自体が分からない方は、以下の記事をご覧ください。

※以下の記事では「stagger」については説明されていませんが、staggerは、ターゲットとなる要素がある場合（今回の場合はboxクラスが付いた要素）に対して、それぞれのアニメーションを順番にずらしながら実行するためのプロパティです。

関連記事

アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方

STEP. 1：scrollTriggerプロパティを追加する

registerPlugin(ScrollTrigger)を使ってScrollTriggerを登録すると、gsap.to()やgsap.from()などのメソッド内でscrollTriggerプロパティが使用できるようになります。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {},
  });
});

scrollTriggerプロパティにはオブジェクトを指定し、その中でトリガー要素やアニメーションの開始位置などを指定していきます。

STEP. 2：トリガーとスタート地点を決める

次に、スクロール位置がどの位置まで来たらアニメーションをスタートさせるかの「トリガー」となる位置を指定します。

トリガーを設定するには、scrollTriggerオブジェクト内でtriggerプロパティを指定します。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
    },
  });
});

また、このトリガー要素がビューポートのどの位置にきたらアニメーションを開始するかを指定するには、startプロパティを指定します。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
      start: "top 50%",　// アニメーション開始時の指定（「トリガー要素の上端」が「ビューポートの上から50%の位置」に来たときに開始）
    },
  });
});

上のように”top 50%”とすることで、「トリガー要素の上端」が「ビューポートの50%位置」に来たときにアニメーションが開始されるようになります。

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

参考：トリガー要素とビューポートの位置関係を視覚的に確認する方法

GSAPを使った開発中は、markersプロパティを指定することで、トリガー要素とビューポートの位置関係を視覚的に確認し、アニメーションの開始位置を分かりやすく把握できるようになります。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
      start: "top 50%",
      markers: true,
    },
  });
});

See the Pen GSAP ScrollTriggerプラグイン 使い方 デモ markers by E-VALUE WORKS (@evw) on CodePen.

これで、トリガー要素の上端「start」がビューポートの指定位置「scroll-start」（例：50%の位置）に達しているかどうかを、視覚的に確認できるようになります。

ScrollTriggerの応用的な使い方

要素の再表示時にもアニメーションを実行する方法（toggleActions）

ScrollTriggerは、デフォルトではページをスクロールダウンして要素が初めてビューポート内に入ったときに、一度だけアニメーションが再生されます。

これは、デフォルトではtoggleActionsプロパティが”play none none none”と設定されているためです。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
      start: "top 50%",
      markers: true,
      toggleActions: "play none none none", // 省略時も同様
    },
  });
});

それぞれの値は、以下の4つのタイミングでの動作を指定しています。

toggleActions: "onEnter onLeave onEnterBack onLeaveBack"
項目説明
onEnterstartポイントがビューポートの指定位置（scroll-start）に到達したとき
onLeaveendポイントがビューポートの指定位置（scroll-end）を通過したとき
onEnterBack上方向にスクロールして、endポイントがビューポートの指定位置（scroll-end）を通過したとき
onLeaveBack上方向にスクロールし、startポイントがビューポートの指定位置（scroll-start）を通過したとき

また、toggleActionsに指定できる値には、次のようなアクションがあります。

項目説明
playアニメーションを再生する。
pauseアニメーションを一時停止する。
resume一時停止していたアニメーションを再開する。
reverseアニメーションを逆再生する。
restartアニメーションを最初から再生し直す。
completeアニメーションを完了状態にする。
resetアニメーションを初期状態に戻す。
none何も実行しない。

そのため、たとえば以下のようにトリガー要素のstartとendを指定し、toggleActions:を”play pause resume reset”と指定すると以下のようになります。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
      start: "top 50%",
      end: "50% 50%", // // アニメーション終了時の指定（「トリガー要素の上から50%の位置」が「ビューポートの上から50%の位置」に来たときに開始）
      markers: true,
      toggleActions: "play pause resume reset",
    },
  });
});

See the Pen GSAP ScrollTriggerプラグイン 使い方 デモ toggleActions by E-VALUE WORKS (@evw) on CodePen.

  • onEnter（startが下スクロールでscroll-startを通過したとき）：アニメーションが再生される
  • onLeave（endが下スクロールでscroll-endを通過したとき）：アニメーションが一時停止される
  • onEnterBack（endが上スクロールでscroll-endを通過したとき）：一時停止されていたアニメーションが再開される
  • onLeaveBack（startが上スクロールでscroll-startを通過したとき）：アニメーションが初期状態に戻る

スクロール量とアニメーションの進行具合を同期させる方法（scrub）

デフォルトでは、トリガー要素がスクロール開始位置（start）に到達するとアニメーションが再生され、スクロールの動きとは関係なく、設定されたdurationの時間で最後まで自動的に再生されます。

これをスクロール量に応じてアニメーションの進行度が変わっていくようにしたい場合は、scrubプロパティを設定します。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
      start: "top 50%",
      markers: true,
      toggleActions: "play none none none",
      scrub: true,
    },
  });
});

See the Pen GSAP ScrollTriggerプラグイン 使い方 デモ scrub by E-VALUE WORKS (@evw) on CodePen.

こうすると、startポイントがscroller-startを通過してからscroller-endがendポイントを通過するまでのスクロール量に合わせて、アニメーションの進行度が0%→100%のように変化していきます。

また、scrubに数値を指定すると、アニメーションがスクロール位置に追いつくまでの追従時間を設定できます。

以下では scrub: 1と指定しているため、スクロール後に1秒かけて滑らかにアニメーションが追従していることが分かります。

See the Pen GSAP ScrollTriggerプラグイン 使い方 デモ scrub: 1 by E-VALUE WORKS (@evw) on CodePen.

スクロール中、ターゲット要素を同じ位置に固定する方法（pin）

スクロール中、ターゲット要素をビューポート上の同じ位置に固定しておきたい場合、pinプロパティを設定します。

以下のようにpin: trueと設定すると、startポイントがscroller-startを通過してアニメーションが開始された時点の位置でトリガー要素自体を固定します。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    y: 0,
    ease: "power2.out",
    stagger: 0.2,
    scrollTrigger: {
      trigger: ".sec02",
      start: "top 50%",
      markers: true,
      toggleActions: "play none none none",
      scrub: true,
      pin: true,
    },
  });
});

See the Pen GSAP ScrollTriggerプラグイン 使い方 デモ pin: true by E-VALUE WORKS (@evw) on CodePen.

また、pinの値に固定したい要素のセレクタを指定することでトリガー要素とは別の要素を固定することもできます。

pinで固定している要素自体をアニメーションさせるとScrollTriggerの位置計算がずれて、アニメーションや固定位置が正しく動作しなくなる場合があります。

アニメーションを作らずにスクロールに応じて任意の処理を実行する方法（ScrollTriggerを単独で使用する方法）

これまでScrollTriggerはGSAPのto メソッド内で使用していましたが、トリガー要素が表示された際に独自の処理を実行したいだけでアニメーションを行わない場合は、ScrollTriggerを単体で使用することもできます。

ScrollTriggerを単体で使用したい場合は、ScrollTrigger.create()を使用します。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  ScrollTrigger.create({
    trigger: ".sec02",
    start: "top 50%",
    markers: true,

    onEnter: () => {
      console.log("sec02に入りました（下方向）");
    },
    onLeave: () => {
      console.log("sec02から出ました（下方向）");
    },
    onEnterBack: () => {
      console.log("sec02に再び入りました（上方向）");
    },
    onLeaveBack: () => {
      console.log("sec02から出ました（上方向）");
    },
  });
});

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

これで各タイミング（onEnter・onLeave・onEnterBack・onLeaveBack）でブラウザのコンソールにログが表示されるようになります。

まとめ

今回はGSAPのScrollTriggerプラグインを使ってアニメーションをスクロールと連動させる方法を解説しました。

ScrollTriggerの使い方が理解できると非常に幅広いアニメーション表現が実装できるようになります。

この機会にぜひ、ScrollTrigger の基本的な仕組みや使い方をマスターしてみてください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

前の投稿へ

同じカテゴリーの記事を読む

HOMEお役立ちコラムJavaScript【GSAP】ScrollTriggerプラグインの使い方！スクロールとアニメーションを連動させる方法