GSAPにはScrollTriggerというプラグインがあります。
このプラグインを使用することで、スクロールに連動したアニメーションを作成することができます。
プロパティも多く、さまざまなアニメーションを作ることができますが、今回は「スクロールして要素が画面に表示された時にテキストがフェイドインする」というアニメーションを作成していきます。
作成していく中で出てくるプロパティについては詳しく説明していきますので、ぜひ一緒に作成してみてください！
ScrollTriggerを使う準備をする
何はともあれ、プラグインを読み込みましょう。
GSAPの公式サイトにも載っていますが、まずはHTMLのhead内に以下のファイルを読み込んでください。
ここではCDNで読み込む方法を載せましたが、他の方法で読み込みたい場合は公式サイトのInstallationをご覧になってください。
//GSAPのファイル
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
//ScrollTriggerプラグインのファイル
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>次に、jsファイルに以下のコードを記述します。
gsap.registerPlugin(ScrollTrigger);gsap.registerPlugin();は、GSAPのメソッドのひとつです。
このメソッドは、簡単に言えばGSAPにプラグインを認識させるためのものです。プラグインそのものを読み込む働きはないので、何らかの（CDNやその他の）方法でプラグインを読み込むのを忘れないようにしてください。
画面に表示された時にテキストをフェイドインさせるアニメーション
まずはサンプルとコードをご覧ください。
See the Pen Untitled by Michi (@Michi_) on CodePen.
gsap.fromTo('.js-move',
{x: -100, opacity: 0},
{x: 0,
opacity: 1,
scrollTrigger: {
trigger: '.js-move',
start: 'top 80%',
end: 'bottom 20%',
toggleActions: "play reset play reset",
markers: true,
}
});まずはわかりやすく最低限の実装にしました。
下線部分がscrollTriggerの設定です。
scrollTrigger: { }の{ }内にさまざまなプロパティを設定していきます。
・trigger: '.js-move',
トリガーとなる要素を指定します。この場合は”js-move”のクラス名がついた要素を指定しています。
・start: 'top 80%',
ScrollTriggerのスタート位置を指定します。
ひとつ目の値がトリガーとなる要素の位置、二つ目の値がビューポートの位置です。この場合、トリガーとなる要素の上部がビューポートの上から80％の位置に来た時がScrollTriggerの開始位置です。
後述するmarkersプロパティで、「scroller-start」と表示されている位置です。
デフォルトは"top bottom" です
・end: 'bottom 20%',
ScrollTriggerの終了位置を指定します。startと同様、ひとつ目の値がトリガーとなる要素の位置、二つ目の値がビューポートの位置です。この場合、トリガーとなる要素の下部がビューポートの上から20％の位置に来た時がScrollTriggerの終了位置です。
後述するmarkersプロパティでは、「scroller-end」と表示されている位置です。
デフォルトは"bottom top"です。
・toggleActions: "play reset play reset",
アニメーションが４つの異なる位置でどのように制御されるかを指定します。左から順にonEnter、onLeave、onEnterBack、onLeaveBackの位置を表します。
それぞれについての簡単な説明は以下の通りです。
・onEnter・・・スクロール位置が「start」を超えて前方に移動したときのコールバック
・onLeave・・・スクロール位置が「end」を超えて前方に移動したときのコールバック
・onEnterBack・・・スクロール位置が「end」を超えて後方に移動したときのコールバック
・onLeaveBack・・・スクロール位置が「start」を超えて後方に移動したときのコールバック
文字で見ていてもよくわからないと思うので（残念なことに私はわかりませんでした）、サンプルをゆっくりと動かしてみてください。
下方向にスクロールしていくと、「start」のマーカーが「scroller-start」を超えて前方に移動したとき（onEnter）にテキストが表示されます。これがひとつ目の値で、ここに「play」を指定することでアニメーションが作動します。
そのまま下にスクロールしていくと、「end」のマーカーが「scroller-end」を超えて前方に移動したとき（onLeave）にテキストが非表示になります。これがふたつ目の値で、ここに「reset」を指定することでアニメーションがリセットされ、アニメーション前の状態に戻ります。
今度は上にスクロールしてみてください。「end」のマーカーが「scroller-end」を超えて後方に移動したとき（onEnterBack）にテキストが表示されます。これがみっつ目の値で、ここに「play」を指定することでアニメーションが作動します。
そのまま上にスクロールを続けてください。「start」のマーカーが「scroller-start」を超えて後方に移動したとき（onLeaveBack）テキストが非表示になります。これがよっつ目の値で、ここに「reset」を指定することでアニメーションがリセットされ、アニメーション前の状態に戻ります。
これらonEnter、onLeave、onEnterBack、onLeaveBackには、「play」「reset」の他、「pause」「resume」「restart」「complete」「reverse」「none」が指定できます。必要に応じて使用してください。
デフォルトの設定はtoggleActions: "play none none none"です。
・markers: true,
開発しやすいように、マーカーをつけることができます。
サンプルを見ていただくと、画面右側に「start」「end」「scroll-start」「scroll-end」と４つの表示があるかと思います。「start」「end」はトリガーとなる要素の上部（top）と下部（bottom）、「scroller-start」はScrollTriggerのスタート位置、「scroller-end」はScrollTriggerの終了位置となります。
サンプルでは、要素の範囲がわかりやすいように、背景色をつけています。
テキストの上部に「start」が、下部に「end」が表示されていると思います。
この「start」のマーカー位置が「scroller-start」の位置までくるとアニメーションが作動します。
ちなみにアニメーションは一度きりの設定なので、動きを繰り返し確認したい場合は、右下のrerunをクリックしてください。
複数のテキストをフェイドインで表示する
実際にサイトに実装するときは、複数のブロックに同じアニメーションをつけたり、ブロックごとに左右交互からフェイドインさせるようなことも多いです。
そういった場合のサンプルがこちらです。
左右からテキストがフェイドインで表示されます。
See the Pen ScrollTrigger_02 by Michi (@Michi_) on CodePen.
// 左からフェードインアニメーション
gsap.utils.toArray('.js-fadeInLeft').forEach(element => {
gsap.fromTo(element,
{ x: -100, opacity: 0 },
{
x: 0, opacity: 1,
duration: 1,
ease: "power2.out",
scrollTrigger: {
trigger: element,
toggleActions: "play none none reset",
markers: true
}
}
);
});
// 右からフェードインアニメーション
gsap.utils.toArray('.js-fadeInRight').forEach(element => {
gsap.fromTo(element,
{ x: 100, opacity: 0 },
{
x: 0, opacity: 1,
duration: 1,
ease: "power2.out",
scrollTrigger: {
trigger: element,
toggleActions: "play none none reset",
markers: true
}
}
);
});ひとつ目のサンプルでは出てこなかった部分について解説します。
まずは1行目gsap.utils.toArray('.js-move').forEach(element => { })
ここでは、GSAPのutils.toArrayメソッドを使用しています。GSAPのutils.toArrayメソッドは、選択されたCSSセレクタ（ここでは.js-move）に当てはまる複数の要素を、JavaScriptの配列形式に変換します。
そして.forEachで、配列の各要素に対して指定した処理を1つずつ実行します。この例では、各.js-move要素に対してGSAPアニメーションが適用されます。
それぞれの要素に適用されるアニメーションの内容は、{ }内に記述します。
適用するアニメーションは、ひとつ目のサンプルとほとんど同じですが、ひとつ目のサンプルはわかりやすく「start」と「end」を設定しましたが、こちらは設定していませんのでデフォルトの値となっています。
繰り返し動作を確認できるように、toggleActionsでonLeaveBackにresetを設定しました。
まとめ
今日はScrollTriggerを使用したフェイドインアニメーションについて説明しました。
プロパティがたくさんあってわかりにくいところもありますが、使いこなせるようになったらいろいろなことができそうで楽しみです。
皆さんもぜひScrollTriggerを使用したアニメーションに挑戦してみてください！
コメント