GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動

GSAP2022.3.11

最終更新日：2022.3.11 Update!!

以前の記事でスクロールに対応した基本的なアニメーション実装でGSAPを使った解説を行いましたが、今回はちょっとした応用としてスクロール量とアニメーションの進捗を同期させることで、スクロール量に連動したアニメーションというものを実装してみたいと思います。ビューポートなどのトリガーエリアに対象要素が交差したら勝手にアニメーションが実行されているものでしたが、アニメーションの時間がスクロールに連動していないのでスクロールの速度やタイミングによってはアニメーションが終わる前に通り過ぎ去ってしまう可能性もあります。そんな時にしっかりとアニメーションを見てもらうためにもアニメーションの動作をスクロール量に同期させておくメリットはあります。今回はサンプルを例に実装ケースをみていきます。 GSAPについて基本的な使い方やスクロールに対応するアニメーションの実装方法に関して過去記事を合わせてご参考ください。（参考記事） GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる前回同様、今回もGSAPのScrollTriggerプラグインを使ってスクロールに対応したアニメーションを作成していきます。HTML側ではトリガー要素とアニメーション要素を下記を一例に用意しておきます。

<div class="js-animation-trigger">
  <div class="js-animation-element"></div>
</div>

おさらいですが、スクロールイベントに合わせて、トリガーエリアやビューポートに対象要素が入ったタイミングでアニメーションを実行させる場合には下記のように記述します。あらかじめGSAP本体とScrollTriggerプラグインのモジュールを読み込んだ上で、下記のようにScrollTriggerのプラグインを使えるようにしておくのを忘れないようにしましょう。処理の方ではscrollTriggerオプションにトリガー要素とアニメーション発火の基準位置を指定します。詳しくは「GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編」をご参考ください。

// プラグイン読み込み
gsap.registerPlugin(ScrollTrigger);

gsap.fromTo('.js-animation-element',
  { x: -120, autoAlpha: 0 },
  { x: 120, autoAlpha: 1, delay: 0.1, duration: 1.2, ease: 'power2.out',
    scrollTrigger: {
      trigger: '.js-animation-trigger',
      start: 'top 90%'
    },
  }
);

この内容で作成したサンプルはこちらに用意していますのでご覧ください。実際に動かしてみると、スクロール量に連動せず、トリガー要素と対象要素の位置を検知し、アニメーションが実行されているのが確認できます。もちろん早いスクロールの場合にはアニメーションが完了するまでに通り過ぎてしまいます。そこで、この処理にスクロール量をアニメーションの進捗に同期させるようにしていきます。ScrollTriggerではオプションを指定するだけで簡単に実現ができてしまいます。

スクロール量に連動したアニメーションの進捗で実行させる

先程の処理に対してscrollTriggerのオプションにスクロール量に連動させるための指定を追加していきます見比べてみると「end」「scrub」「markers」の指定が新たに加わっています。このうちmarkersに関してはデバッグ用ということなので本番公開の際には不要なのですが、scrollTriggerの挙動を理解するうえで重要になりますので開発時は設定しておくのがお勧めです。

gsap.fromTo('.js-animation-element',
  { x: -120, autoAlpha: 0 },
  { x: 120, autoAlpha: 1, delay: 0.1, duration: 1.2, ease: 'power2.out',
    scrollTrigger: {
      trigger: '.js-animation-trigger',
      start: 'top 90%',
      end: 'bottom 30%',
      scrub: true,
      markers: true
    }
  }
);

スクロール量に連動させるためには、まずscrubの設定を有効化させる必要があります。デフォルトではfalseとなっているため、trueの値を入れます。また進捗を図るため、アニメーションを終了させるトリガーとスクローラーの基準位置を設定するendのオプションも必要になります。こちらはstart同様に設定する形になり、最初の値には対象要素の基準位置、2つ目の値にはスクローラーの基準位置を設定します。上記では、トリガー要素の下端とビューポートの上端から30%の位置を基準とする例になります。これらオプションについては下記の通りになります。

scrollTrigger.end	アニメーションの終了位置を指定、最初の値ではトリガー要素の基準位置を、2番目の値ではスクローラーの基準位置を指定します。
scrollTrigger.scrub	trueを指定することで、アニメーションの進捗をスクロール量に連動させることができる。（初期値はfalse）数値を入れると進捗が追いつくまでの時間（秒）の設定となり、イージング効果を設定できる。
scrollTrigger.markers	trueを指定することで、トリガー要素の基準位置とスクローラーの基準位置のガイドラインが表示される。実装時やデバッグなどで視覚的に確認するときに役立つ。

この内容で作成したサンプルはこちらで確認いただけます。スクロール量に合わせてアニメーションの動きが変わるのが確認できます。またアニメーションはstartで設定したトリガー要素とスクローラーの基準位置が重なるところから始まり、endで設定した基準位置までスクロールすると終了することが確認できます。

イージングをつけてスクロール量にアニメーションを連動させる

また、下記のようにscrubの値に数値を入れることでイージング効果をつけることができます。正確には、指定した値の秒数だけ遅延してアニメーションが行われる形になります。そのため見た目としてはイージングがついたように見えます。ヌルヌルとした自然なアニメーションを表現することができます。特に直線的な動きでない場合には設定しておきたいですね。

gsap.fromTo('.js-animation-element',
  { x: -120, autoAlpha: 0 },
  { x: 120, autoAlpha: 1, delay: 0.1, duration: 1.2, ease: 'power2.out',
    scrollTrigger: {
      trigger: '.js-animation-trigger',
      start: 'top 90%',
      end: 'bottom 30%',
      scrub: 2.4,
      markers: true
    }
  }
);

この内容で作成したサンプルはこちらで確認いただけます。先程のイージングがついていないものと比較すると違いがよくわかりますね。イージングも数値で設定できるのも仕上がりの動きが直感的にイメージしやすいのでわかりやすいですね。

staggerオプションでスクロール量を複数要素のアニメーション進捗に同期させる

テキストのアニメーションなどで1文字ずつ時間差でアニメーションが実行されるケースも最近ではよく見かける動きになります。そんな要件にもGSAPのScrollTriggerを使って実装されることが多いのですが（参考記事：GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編）同じようにこれらもスクロール量に合わせてアニメーションを進められるようにすることができます。 HTML側では下記のように複数のアニメーション要素をトリガー要素でラップしている形になります。GSAPでこれらの要素に対して一括でアニメーションを行う場合には配列内のデータとして扱われるようになります。

<div class="js-animation-trigger">
  <div class="js-animation-element">One</div>
  <div class="js-animation-element">Two</div>
  <div class="js-animation-element">Three</div>
  <div class="js-animation-element">Four</div>
  <div class="js-animation-element">Five</div>
</div>

処理としては同じような形で、スクロール量とアニメーションの進捗を合わせる指定を入れていくのですが、異なる点としては「stagger」オプションを追加する点になります。下記では、先頭から全要素のアニメーションの時間差が1.8秒になるような設定です。

gsap.fromTo('.js-animation-element',
  { x: -120, autoAlpha: 0 },
  { x: 120, autoAlpha: 1, delay: 0.1, duration: 1.2, ease: 'power2.out',
    scrollTrigger: {
      trigger: '.js-animation-trigger',
　　　　　　   start: 'top 90%',
　　　　　　   end: 'bottom 30%',
      scrub: true,
      markers: true
    },
    stagger: {
      from: 'start', amount: 1.8
    }
  }
);

staggerオプションを使うと、複数要素に対してのアニメーションをより詳細に制御できるようになります。オプションで設定できる内容は下記になります。アニメーション要素を並べているレイアウトベースで、どのようにアニメーションをずらしていくかというのが直感的に設定できる仕様になっています。特にグリッド状に並べた要素をドミノ倒しのように時間差で動かしていくなども簡単に実現できるようになりますね。

stagger.amount	対象となる各要素のアニメーション発火のタイミングを調整できます。値が10で対象となる要素が5つの時には2秒間の差が発生する形になります。
stagger.from	どの要素からアニメーションを実行するかを指定できます。対象要素は配列として扱われ「start」の指定では最初から、「end」では最後から、「center」は真ん中から、「random」はその名の通りランダムに、「edges」の場合にはグリッド状に配置している場合などで周囲から実行することができます。またインデックス番号を指定することで、その要素を基準にすることも可能です。
stagger.grid	アニメーション要素を複数行でグリッド状に並べている場合には、行、列の順で配列型の数値で指定することでグリッドを定義できます。これで定義したグリッドの配置に合わせてアニメーションを扱うことができます。
stagger.axis	上記のgirdオプションを指定した場合に、基準となる方向は縦横両方になりますが、「x」や「y」と指定することで一方向に制御することができます。

この内容で作成したサンプルはこちらで確認いただけます。このようなテキストの凝ったアニメーションはよく見かける動きですが、うまく文字単位で時間差を発生させることで、よりテキストの注目度合いが変わったり、いろんな表現にも繋がるので、ぜひマスターしておきたいものですね。

今回はGSAPのプラグインであるScrollTriggerプラグインを使って、アニメーションの進捗をスクロール量と連動させるアニメーション実装についてみていきました。ビューポートを基準に検知させた自動アニメーションより、スクロールに連動させたアニメーションの方がユーザーのアクションに馴染む動きに仕上がるかと思いますので、細かい違いですがぜひ一度試してみたいですね。（参考にさせて頂いたサイト） GreenSock ScrollTrigger GreenSock Staggers