Skip to content

GSAP ScrollTrigger で作るスクロールアニメーション

February 7

・javascript

GSAP の ScrollTrigger はスクロールに応じたアニメーションを作成できます。

ScrollTrigger とは

  • アニメーションを設定した要素が viewport（ビューポート）にある場合のみ再生されます。
  • GSAP のアニメーションと組み合わせて豊富なアニメーションを作成できます
  • 縦・横どちらのスクロールにも対応しています
  • ウィンドウサイズが変更されると自動的に再計算されます
  • アニメーションの実行タイミングの指定が柔軟

そのほかの主な特徴は公式ドキュメントでご確認ください。

インストール

公式サイトの GSAP Installation ではダウンロードやCDN、npm などの導入方法が紹介されています。

CDN

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

npm

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

gsap.registerPlugin(ScrollTrigger);

例1. シンプルなアニメーション

公式サイトの例を参考にシンプルなフェードインアニメーションを作成しました。
デモ（CodePen）

テキストと画像が GSAP の fromTo でフェードインしながら下から上/右から左へ移動するアニメーションがスクロールに応じて一度だけ実行されます。

gsap.fromTo(
  ".image",
  {
    x: 50,
    opacity: 0,
  },
  {
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
    },
    x: 0,
    opacity: 1,
  }
);

gsap.fromTo(
  ".text",
  {
    y: 50,
    opacity: 0,
  },
  {
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
    },
    y: 0,
    opacity: 1,
  }
);

ScrollTrigger のオプションについて

  • trigger : 指定した要素が viewport に入ったときにアニメーションが発火
  • start : trigger の要素のどの部分が viewport のどの位置に達した際にアニメーションを発火させるかを指定

デモでは trigger の上部（ top ）が viewport の中央（ center ）に達した際にアニメーションが発火します。

scrollTrigger: {
  trigger: ".box",
  start: "top center",
},

ScrollTrigger のオプションで markers: true にすると画面右端にアニメーションの開始・終了位置が表示されます。

scrub: true を指定するとアニメーションの進行状況がスクロールバーにリンクされ、アニメーションがスクロールバーに連動するようになります。 scrub: 0.5 など数字を指定した場合は、アニメーションがスクロールバーに0.5秒かけて追いつきます。

例2. ページのスクロール量を表すプログレスバー（Reading Progress Bar）

ブログの記事などページのスクロール量を表すプログレスバーです。
デモ（CodePen）

プログレスバー表示用の div を用意します。あとでアニメーションの発火トリガーに設定したいので、記事本文を囲むタグに任意の class 名を指定します。

<div class="progress"></div>
<article class="article">記事本文</article>

css では記事の最後に到達したときの状態を設定します。また、スクロール後も画面上にプログレスバーを常時表示したいので、 position: sticky; でページ上部に固定します。

.progress {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: #8bd3dd;
}

GSAP でアニメーション開始時の状態を設定します。

gsap.from(".progress", {
  // アニメーションさせる要素
  scaleX: 0, // width: 0 から変化する
  transformOrigin: "left center", // プログレスバーが画面左から右へ変化する
  ease: "none",
});

上記に ScrollTrigger の設定を追加します。アニメーションの発火トリガーとなる要素は .article です。アニメーションは .article の上部が viewport の 72px に達したときに開始され、 .article の最下部が viewport の最下部に到達したときにアニメーションが終了します。

gsap.from(".progress", {
  scrollTrigger: {
    trigger: ".article",
    scrub: true,
    start: "top 72px", // アニメーション開始位置
    end: "bottom bottom", // アニメーション終了位置
  },
  scaleX: 0,
  transformOrigin: "left center",
  ease: "none",
});

全コードはデモページでご確認ください。
デモ（CodePen）

例3. スクロールに応じて背景色を変化

スクロールに応じて background-color を変化させます。
デモ（CodePen）

css で変化後の背景色を指定します。

.change {
  background-color: #8bd3dd;
}

GSAP でアニメーション開始時の状態や効果などを設定します。

gsap.from(".change", {
  // アニメーションさせる要素
  duration: 0.5, // 0.5秒かけて変化させる
  backgroundColor: "#fef6e4", // 変化前の背景色
  ease: "none",
});

上記に ScrollTrigger の設定を追加します。アニメーションの発火トリガーとなる要素はアニメーションを付与する要素と同じ .change です。背景色を変化させるセクションの中ほどあたりまでスクロールした際にアニメーションを開始して、スクロールがセクションの最後に達したときにアニメーションが終了するようにしています。

gsap.from(".change", {
  scrollTrigger: {
    trigger: ".change",
    start: "center center",
    end: "bottom bottom",
    scrub: true,
  },
  duration: 0.5,
  backgroundColor: "#fef6e4",
  ease: "none",
});

全コードはデモページでご確認ください。
デモ（CodePen）

例4. 画像やテキストが切り替わるアニメーション

GSAP の Timeline を利用した連続のアニメーションの例です。

デモ（CodePen）

参照

Tags

animation web-developer how-to