gsapのscrollTriggerのscrubの使い方 | スクラブアニメーションやパララックスを簡単に実装
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を使うことで、簡単にスクラブアニメーションや、パララックスの動きを再現できるということを説明しました。 具体的には、以下のようなことに応用できます。- 背景画像のパララックス効果
- テキストやボタンのフェードイン効果
- 横スクロールするコンテンツの固定表示