JavaScript

GSAPを使ってスクロールしたら要素が順番に浮き出る実装をする

  /

GSAPを使って、スクロールしたら要素がふわっと浮き出てくる実装をしてみます。

デモページは以下のとおりです。

デモページ

スクロールしていくと、スクロール量に合わせて要素が次々と浮き出てくるあれです。

GSAPのscrollTriggerを使うと簡単に実装できたので、個人的に気に入りました。

ぜひ参考にしてみてください。

参考URL：https://8oo.jp/blog/39/

Contents

はじめに：GSAPとは

はじめに、GSAPとは、高機能なアニメーションを実装できるJavaScriptライブラリです。

JavaScriptのライブラリなんだな〜と覚えておくことにします。

GSAP＆ScrollTriggerをページ内で使えるようにしよう

GSAPをページ内で使えるようにするには、jQueryなどと同様にscriptタグでCDNを読み込む必要があります。

今回は、GSAPの本体とあわせて「ScrollTrigger」の拡張プラグインも必要です。

ですので、まずは下記のGSAPインストールページに行きます。

https://greensock.com/docs/v3/Installation

ページをスクロールして出てくる「GSAP 3 Install Helper」の「CDN」タブにて、「ScrollTrigger」にチェックを入れます。

そうすると、Browser code内にコードが表示されますので、コードをコピーして、htmlファイルの</body>の直前に貼り付けます。

ここまでできたらGSAPとScrollTriggerの準備は完了です！

実際にスクロールで複数要素がふわっと浮き出てくるデモを作る

準備ができたら、実際にデモを作っていきましょう！

土台となるHTML/CSS

さて、サクッと土台を作りました。

任意のjsファイルを作成し、上記でhtmlに貼り付けたGSAP scriptタグの直下で読み込みを行ってください。

私は、assets/jsフォルダ内にmain.jsを作成し、scriptタグで読み込んでいます。

See the Pen
Untitled by tom k (@tom-k-the-encoder)
on CodePen.

同じ構成の要素が並んでいるページで、これの1つ1つの要素をスクロールするごとにふわっと出現させたいです。

現状、べたーっとすべて出現したままになっています。

JavaScript

追加するJavaScriptは、以下の通りです！解説を部分的にしていきます。

gsap.utils.toArray(".content").forEach(target => {
  gsap.from(target, {
    scrollTrigger: {
      trigger: target,
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
    opacity: 0,
    yPercent: 50,
  });
});

gsap.utils.toArray(“.content”).forEach(target => {

「.content」部分は、ふわっと浮き上がらせたい部分のクラス名を入れます。

「target」は、どんな名前でもOKですが、わかりやすいものがいいでしょう。

trigger: target,

ここの「target」部分は、上部でつけた名前と同じものを入れます。

start: ‘top 75%’

画面のどの位置に要素が差し掛かったらアニメーションを始めるかを記述します。

この設定では、画面の上から75%の部分に要素が差し掛かったらアニメーションを開始します。

toggleActions: ‘play none none reverse’,

左から順番に、以下のようになります。

  1. onEnter…スクロール位置がstart位置を超えて下に移動したときの動作
  2. onLeave…スクロール位置が終了位置を超えて下に移動したときの動作
  3. onEnterBack…スクロール位置が終了位置を超えて上に移動したときの動作
  4. onLeaveBack…スクロール位置がstart位置を超えて上に移動したときの動作

また、指定できるものは以下の通りです。

play アニメーションスタート
pause 一時停止
resume アニメーション再開
reset アニメーション開始直前の状態に戻す
restart はじめに戻ってアニメーションスタート
complete アニメーションスタート直後の状態にする
reverse アニメーションを逆再生する
none 指定しない

今回の「スクロールしたら要素がふわっと浮き出てくるアニメーション」については終了位置は設定していません。

onEnterを「アニメーション開始」のplayに設定。

onLeaveBack、つまり、スクロールを戻したら、reverse「アニメーションを逆再生する」に設定しています。

なので、top: 75%の位置に要素が差し掛かると、ふわっと浮き出るアニメーションが開始され、スクロールを逆に動かす（戻す）とアニメーションが逆再生されます。

yPercent: 50,

要素がtop: 75%の位置に差し掛かったら、y軸方向に要素の高さの50%分移動します。

ピクセルで指定することもできて、その場合、例えばy軸方向に200px動かしたいときには以下のように指定します。

y: 200,

完成したデモ

HTML/CSS、GSAPを用いて作ったデモは以下の通りです。

See the Pen
gsap_20230910002 by tom k (@tom-k-the-encoder)
on CodePen.

要素がスクロールされるごとにふわっと浮き出てきて、スクロールを戻すとフッと消えていくかと思います。

jQueryよりも簡単に実装ができ、扱いやすかったです！

GSAPのライセンス

GSAPには無料の「Standard License」、有料の「Business License」の2種類のライセンスがあり、基本的には無料で使えます。

ただし、複数のエンドユーザーに販売するプロジェクトについては有料ライセンスが必要です。

詳しくはGSAP公式サイトのライセンスページをご覧ください。

まとめ

GSAPでスクロールするとふわっと要素が浮き出てくるアレを実装してみました。

jQueryよりも簡単だったので、今後も実務に使っていきたいと思いましたし、ほかの拡張プラグインも試してみたいと思えました！

今後も勉強を続けて、アニメーション効果の高いWebサイトを作れるようにしたいです。

それでは！

GSAP JavaScript
RELATED POST