gsapのscrollTriggerのscrubの使い方 | スクラブアニメーションやパララックスを簡単に実装

2021年8月29日gsap

GSAPのScrollTriggerのscrubオプションを使用して、スクロールに連動したアニメーション（スクラブアニメーション）や、パララックスを簡単に実装する方法を解説します。
この記事ではscrubオプションの基本的な使い方と、コードの詳細な説明を行います。

gsapのscrollTriggerのscrubのデモ

See the Pen
gsap scrollTrigger scrub by Sosak (@Sosak2021)
on CodePen.

gsapのscrollTriggerのscrubの使い方

gsap.from('.b2 h2', {
  duration: 1.4, // アニメーションの再生時間（秒）
  autoAlpha: 0, // 要素の透明度（opacity）と表示状態（visibility）を同時に操作
  y: 150,       // Y軸方向に150px下から始める
  scale: 0.3,   // 要素の拡大縮小率。0.3は元の大きさの30%
  scrollTrigger: {
    trigger: '.b2 h2', // アニメーションを開始するトリガーとなる要素
    markers: true,     // 開始・終了位置をデバッグ用に画面に表示
    scrub: 1,          // スクロールに応じてアニメーションを同期。数値は遅延時間（秒）
  }
});

trigger: '.b2 h2’

アニメーションを開始するトリガーとなる要素を指定しています。
.b2 h2がスクロールで画面内に入ったときにアニメーションが開始します。

markers: true

開始位置（start）や終了位置（end）をデバッグ用に画面上に可視化します。
本番環境ではmarkers: falseにするのが一般的です。

scrub: 1

スクロールにアニメーションを同期させます。
数値（1）はスクロール後にアニメーションが遅れて終了するまでの時間（秒）を表します。
scrub: 0.5にすると遅延時間が短くなり、スムーズなスクラブアニメーションが実現します。

現実的には0.3から0.5が多く使われるかと思いますが、いろいろ試すことでおもしろいアニメーションが簡単にできあがります。

このようにscrubはとても簡単に利用することができます。

scrub: trueとscrub: 1の違い

scrub: true

スクロールに完全に同期してアニメーションを進めます。遅延時間はありません。

scrub: 1

スクロールにアニメーションを同期しますが、遅延時間（1秒）を設定しています。遅延時間があることで、スクロールの動きが滑らかになります。

scrubとよく合わせて使うオプション

それぞれ上のデモの例で説明します。

duration

アニメーションの再生時間を1.4秒に設定しています。
この値を変更することで、アニメーションのスピードを調整可能。

autoAlpha

要素の透明度（opacity）を0（完全に透明）にし、同時に表示状態を非表示に設定します。
autoAlphaを使うと、opacityとvisibilityを効率的に操作できるため便利です。

y

要素の初期位置をY軸方向に150px下に設定します。
アニメーション終了時には元の位置（0px）に戻ります。

scale

要素をアニメーション開始時に元のサイズの30%（縮小）に設定。
スクロールでアニメーションする中で元のサイズ（1.0）に戻ります。

まとめ

gsapのscrollTriggerのscrubを使うことで、簡単にスクラブアニメーションや、パララックスの動きを再現できるということを説明しました。
具体的には、以下のようなことに応用できます。

  • 背景画像のパララックス効果
  • テキストやボタンのフェードイン効果
  • 横スクロールするコンテンツの固定表示

ぜひ使ってみてください。

gsap

Posted by devsakaso