GSAPのScrollTrigerを使ってクラスの付け外し👏

こんにちは、AndHAコーディング部です。

指定場所までスクロールしたタイミングで、クラスを付け外しすることでアニメーションを再生する表現はどのサイトを見ても当たり前に使っているところが多いと思います。

今回はGSAPのScrollTrigerを使った雛形をコピペで利用できるコードを簡単に紹介します！

gsapのバージョンは3.10.4を利用しています。
gsap – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers

完成コード

.classNameは判定させたい要素に指定するクラス名、.classActiveは判定させたい要素に追加されるクラス名となっていますので適宜変更してください。

またデバッグ用のマーカーを表示させているので、動きのチェックが終わったらmarkers: trueの指定を削除してください。

一度きりの変更にする場合

ScrollTrigger内にonceを定義することで一度きりの挙動になります。

once
Boolean – true の場合、ScrollTrigger は終了位置に一度でも到達するとすぐに kill() 自身を終了します。これにより、スクロール イベントをリッスンしなくなり、ガベージコレクションの対象となります。これは、onEnterを最大1回だけ呼び出すことになります。関連するアニメーションを停止させることはありません。前方にスクロールするときに一度だけアニメーションを再生し、リセットや再生の必要がないようにしたい場合に最適です。また、toggleActionsを「play none none none」に設定する。
GreenSock | Docs | Plugins | ScrollTrigger

まとめ

クラスのトグルさえ出来てしまえばあとはCSSでフェードイン・アウトを行ったり、背景を表示させたり様々なアニメーションを組み合わせることが出来ますので色々と試してみてください。