【GSAP】ScrollTriggerでスクロールアニメーションを実装

この記事では「GSAPのScrollTriggerでスクロールアニメーションを実装する方法」について解説します。ScrollTriggerはGSAPの拡張プラグインです。

ScrollTriggerは画面スクロールに応じてアニメーションを発火させたい場合に便利です。

ScrollTriggerの基本的な使い方を学習しましょう。

この記事を読むと...

ScrollTriggerの導入方法が分かる
ScrollTriggerの基本的な使い方が分かる

1 ScrollTriggerとは
2 ScrollTrigger導入方法
3 ScrollTriggerの基本的な使い方
- 3.1 scrollTriggerのscrub
- 3.2 stagger（スタッガー）
4 まとめ

ScrollTriggerとは

ScrollTrigger（スクロールトリガー）とは、GSAPの拡張プラグインの一つです。ScrollTriggerはスクロールの位置に応じてアニメーションを発火させることができます。

また、ScrollTriggerは特定のスクロール位置の間で要素を固定する「ピン留め機能」や開発時のデバッグを視覚的に確認できる「マーカー」機能などがあります。

GSAPについては以下の記事をご覧ください。

: 【超入門】GSAPを導入してアニメーション実装を解説
この記事では「GSAPの導入方法と基本的なアニメーションの実装方法」について解説します。GSAPはWebサイトにアニメーションを実装することができます。簡単なものであれば、GSAPを使わなくてもでき ...

ScrollTrigger導入方法

ScrollTriggerを導入する場合、公式サイトからCDNによる導入方法が簡単です。

CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略でインターネットを経由してファイルを配信することができます。CDNは、headタグの中、もしくはbody閉じタグの直前に記述するだけで使用することができます。

ScrollTriggerは公式サイトからCDNのタブで入手することができます。

GSAP本体と、「ScrollTrigger」にチェックを入れます。次に「Browesr code」のscriptタグのコードをコピーします。

こちらのコードをコピーしてheadタグ、もしくはbodyタグの直前に貼り付けて使用できます。

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

headタグに使用するなら、以下のように使用します。

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <title>Document</title>

  <!-- css -->
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css" />

  <!-- GSAP CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

  <!-- ScrollTrigger CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script src="main.js" defer></script>
</head>

開発時のJavaScriptをmain.jsに記述する場合は、その前にGSAPを読み込んでおく必要があります。ScrollTriggerのような拡張プラグインは、GSAPを読み込んだ「後」に読み込む必要があるので記述順に注意しましょう。

ScrollTriggerの基本的な使い方

ScrollTriggerの基本的な構文は以下になります。

gsap.to('アニメーションさせる要素', {
  // 初期設定
  プロパティ名: 値,
  プロパティ名: 値,
  scrollTrigger: {
    trigger:'トリガーとなる要素',
    start: 'アニメーション開始位置の指定',
    markers: true, //マーカーの表示 falseで非表示 
  }
});

ScrollTriggerでよく使われるプロパティは以下になります。

プロパティ	概要
animation	アニメーションを指定する
end	ScrollTriggerの終了位置を指定
endTrigger	ScrollTriggerの終了位置となるトリガーを指定
horizontal	水平スクロールの使用有無を決める
id	ScrollTriggerのidを指定
markers	画面にマーカーを表示する
pin	要素をピンで留める（画面に固定する）
scrub	アニメーションとスクロールバーの動きを紐付ける
snap	スクロール停止後、スナップを行う
start	ScrollTriggerの開始位置を指定
stagger	同じ要素（クラス）を連続で動かす
trigger	ScrollTriggerの終了位置となるトリガーを指定

例えば、以下のコードでは画面を上にスクロールすると要素が右に100px移動するようなアニメーションになります。

See the Pen gsap.timeline by 山中滉大 (@tips-web) on CodePen.

<div class="container">
  <div class="box bg-skyblue">要素</div>
</div>

.container {
  padding-top: 100vh;
  padding-bottom: 100vh;
}

.box {
  width: 100px;
  height: 100px;
  font-size: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 余白調整用 */
  margin-top: 40px;
  margin-left: 40px;
}

.bg-skyblue {
  background-color: skyblue;
}

gsap.to('.box', {
  x: 100, // x軸右方向に100px
  scrollTrigger: {
    trigger: '.box', // box要素がアニメーション開始位置に入ったらアニメーション発火
    start: 'top center', // アニメーション開始位置
    markers: true, // マーカー表示
  }
});

画面右側に表示されている、赤と緑のscroller-start、scroller-endやstart、endなどのテキスト表示は、ScrollTriggerのmarkersをtrueにすると表示されます。

markers: true, // マーカー表示

markersは、視覚的にアニメーション開始位置が分かります。開発時はこれを有効にするといいでしょう。

ScrollTriggerのstartは、アニメーション開始位置を設定しています。

start: '対象要素の発火位置 画面上の発火位置', // アニメーション開始位置

以下の場合、topがトリガー要素の基準位置、centerがブラウザ画面内の位置になります。

start: 'top center', // アニメーション開始位置

startプロパティは、「top」、「center」、「bottom」「%」などを指定することができます。

topやcenterなどの位置については、以下のようなイメージをするといいでしょう。

box要素の「start」が、画面の「scroller-start」の位置に来ると、アニメーションが発火します。

startプロパティのほか、endプロパティも使用できます。endプロパティの場合、ScrollTriggerの終了位置を指定します。

scrollTriggerのscrub

ScrollTriggerはscrubプロパティを設定すると、スクロールに応じてアニメーションをすることができます。

See the Pen ScrollTrigger-scrb by 山中滉大 (@tips-web) on CodePen.

gsap.to('.box', {
  x: 100,
  scrollTrigger: {
    trigger: '.box',
    start: 'top center',
    scrub:true, // スクロールに応じてアニメーション
    markers: true,
  }
});

box要素の発火位置が、scroller-startの位置にくると、スクロールに応じて要素が動きます。

stagger（スタッガー）

ScrollTriggerはStaggerプロパティと組み合わせて使用することができます。

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

See the Pen ScrollTrigger-scrub by 山中滉大 (@tips-web) on CodePen.

<div class="container">
  <div class="box bg-skyblue">要素</div>
  <div class="box bg-skyblue">要素</div>
  <div class="box bg-skyblue">要素</div>
</div>

gsap.from('.box', {
  x:10,
  rotation: 360, //回転。
  duration: 2,// 2秒かけてアニメション実行
  scrollTrigger: {
    trigger: '.box',
    start: "center center",
    markers: true,

  },

  ease: "power2.out",
  stagger: {
    from: "start",
    amount: 0.8 // 0.8秒おきに
  },

  opacity:0

});

スクロールすると、0.8秒の時間差で要素が回転しながら表示されます。easeプロパティはイージングの指定ができます。

まとめ

ScrollTriggerの基本的な使い方について解説しました。ScrollTriggerはスクロールアニメーションが手軽に導入できるのでおすすめです。

ScrollTriggerは他のプロパティと組み合わせてさまざまな動きができるので、実際に手を動かしてみることをおすすめします。