ZeroPlus Media > L_JavaScript > jQuery02 > GSAPでスクロールアニメーションを実装しよう

GSAPでスクロールアニメーションを実装しよう

2022/07/14

2023/06/07

GSAPにはTweenとTimelineの他にもさまざまな便利な機能があります。

その一つがGSAPの機能を拡張する「GSAP Plugins」です。HTML要素をドラッグ可能にしたり、SVG画像のパスに沿ったアニメーションを起こせたりなど、自由度の高いUIアニメーションを作ることができます。

※一部、有料のClub GreenSock会員限定のプラグインもあります。

中でも今回は「ScrollTrigger（スクロールトリガー）」という、ユーザーがスクロールする中で起こすアニメーションを細かく設定できるプラグインについて解説します。

この記事で身につく内容

ScrollTriggerを使ったスクロールアニメーションの実装方法

ScrollTriggerの概要
- ScrollTriggerでできること
GSAP Pluginsの導入
ScrollTriggerの使い方
- ScrollTriggerの基本的な書き方
ScrollTriggerの実装例
Staggerを使う
まとめ：ScrollTriggerを使ってみよう

ScrollTriggerの概要

先述したように、ScrollTriggerは、ユーザーがスクロールする中で起こすアニメーションを細かく設定できるGSAPプラグインです。GSAPの拡張機能ですので、GSAPが読み込まれている環境でのみ機能します。

ScrollTriggerでできること

詳しいことは、公式のドキュメントにありますが、まとめると次の3つのことができます！

簡潔なコードでスクロールアニメーションをさせることができる。
「マーカー機能」で、アニメーションの開始と終了位置に簡単に目印をつけられる。
アニメーションの処理が最適化されているので、Webサイトが軽くなる。

自分でJavaScriptやjQueryを使ってスクロールアニメーションを組むこともできますが、複雑化すればするほど大変で、最適化しなければ動作が重くなってしまいます。予期しない挙動が起きたときに原因を探すのも大変です。

それらの問題を解決できるのがGSAPのScrollTriggerというプラグインです。

GSAP Pluginsの導入

GSAP Pluginsの導入方法について触れていきます。

こちらもGSAPの導入と同じで、非常にシンプルです。次の公式サイトにあるインストーラーを使用して導入することができます。

今回は、ScrollTriggerを例として導入していこうと思います。

インストーラーでプラグインにチェックを入れる

上記のインストーラーにてScrollTriggerを確認しましょう。そこにチェックボックスがあるのチェックを入れてください。

Browse CodeからCDNのコードを使う

チェックを入れるとBrowse CodeにあるGSAPのコードの下に、チェックを入れたプラグインのCDNコードが出現します。

そのコードをコピー・使用するHTMLファイルのheadタグ内にペーストすれば導入完了です。

他のGSAP Pluginsも同様にチェックすれば導入できます。

ScrollTriggerの使い方

これでScrollTriggerの導入ができたので、次は使い方について解説していきます。

ScrollTriggerの基本的な書き方

ScrollTriggerは前回の記事で紹介した、TweenやTimelineのプロパティとして扱います。

// シンプルな使用例（公式より）
gsap.to(".box", {
scrollTrigger: ".box", // .boxがビューポート内に入った時にアニメーションが開始。
x: 500
});

scrollTriggerプロパティに対して、複数の設定をすることもできます。

// 発展的な使用例（公式より）
let tl = gsap.timeline({
  // yes, we can add it to an entire timeline!
  scrollTrigger: {
    // scrollTriggerに対して設定するプロパティ
  }
});

scrollTriggerに対して設定するプロパティ

「scrollTriggerに対して設定するプロパティ」をいくつか紹介します。

プロパティ名	値（赤字は初期値）	効果
trigger	セレクタ名	ScrollTriggerの開始位置を計算するためのトリガー要素を指定します。
start	top bottom	ScrollTriggerの開始位置を指定します。「要素の中での位置ビューポート内での位置」の順番で指定します。
end	bottom top	ScrollTriggerの終了位置を指定します。「要素の中での位置ビューポート内での位置」の順番で指定します。

他にも、細かい設定ができるので、以下の公式ドキュメントや、参考サイトを参照してみてください。

GSAP ScrollTriggerのプロパティ一覧(2023/4) - Qiita

ScrollTriggerの実装例

こちらは公式サイトで用意されているデモです。

まずはスクロールしてみましょう。

次のようなスクリプトが記述されています。

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".trigger", // .trigger(グレー背景の箇所)が領域に入ったらアニメーションする
    start: "center bottom", // .triggerの中央が、画面下部に達したら開始
    end: "center top", // .triggerの中央が、画面上部に達したら終了
    scrub: true, // .trigger内でのY方向を固定をする
    markers: true // アニメーションの開始と終了位置を表示する
  }
});

/* 以下、Timelineの形式でTweenが記述されている */
tl.to(".box", {yPercent: 350, duration: 1})
tl.to(".box", {rotation: 360, duration: 3})
tl.to(".box", {xPercent: 350, duration: 1})

Staggerを使う

ScrollTriggerと合わせて使うものとして、Stagger（スタッガー）というプロパティがあります。

Staggerを使うと、次のように、同じ名前のセレクタを順番に時間差でアニメーションさせることができます。

// .box要素をまとめてアニメーションさせる
gsap.from(".box", {
  scrollTrigger: {
    trigger: ".trigger",
    start: "center bottom",
    end: "center top",
    markers: true
  },
  duration: 1.2,
  y: 15, // 少し上に移動させる
  opacity: 0,
  ease: "power2.out",
  // 複数要素を扱うプロパティ
  stagger: {
    from: "start", //左側から
    amount: 0.8 // 0.8秒おきに
  }
});