GSAPではScrollTrigerというプラグインを使えば、スクロールして画面内に入ったらアニメーションを開始させることが出来ます。
そのタイミングでtoggleClassというメソッドを使うとクラスの付け外しが出来ます。
jQueryでもtoggleClassはあり、それについては以下の記事を参照下さい。
-
【jQuery】toggleClassでクラスの付け外しをしてCSSを交互に切り替える方法
続きを見る
またGSAPを使ったことがないという人は以下の記事を参照下さい。
-
GSAPとは？基本的な使い方とアニメーションのサンプル付きで解説
続きを見る
（有料になっていたらすいません🙇♂️）
GSAPのScrollTrigerでtoggleClassを使ってクラスの付け外しをする方法
それでは早速解説していきますが、今回はScrollTrigerというGSAPのプラグインを使うので使ったことがない人は以下の記事を参照下さい。
-
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
続きを見る
それではまずこちらのサンプルをゆっくりスクロールして下さい。
See the Pen
GSAP（ScrollTrigger・toggleActions） by junpei (@junpei-sugiyama)
on CodePen.
startがscroller-startに到達したら青いボックスが右に移動します。
そしてスクロールを戻すとボックスも左に戻ります。
コードは上記の左上のHTML・CSS・JSをクリックして確認できますが、重要なHTMLとJavaScriptはこちらになります。
<div class="container">
<div class="box"></div>
</div>gsap.to(".box", {
x: 100, // 100px右に移動
scrollTrigger: {
toggleActions: "play none none reverse", // 上スクロールで戻る
trigger: ".box", // アニメーションが始まるトリガーとなる要素
start: "top center", // アニメーションが始まる位置
markers: true, // マーカー表示
},
});そして本題のtoggleClassを使ってクラスの付け外しをする方法ですが、コードはこちらになります。
gsap.to(".box", {
x: 100, // 100px右に移動
scrollTrigger: {
toggleActions: "play none none reverse", // 上スクロールで戻る
trigger: ".box", // アニメーションが始まるトリガーとなる要素
start: "top center", // アニメーションが始まる位置
markers: true, // マーカー表示
toggleClass: {
targets: ".box", // クラスを切り替える対象の要素
className: "active", // クラス名 "active" を切り替える
},
},
});追記されたのはこの部分ですね。
toggleClass: {
targets: ".box", // クラスを切り替える対象の要素
className: "active", // クラス名 "active" を切り替える
},これは.boxの要素がスクロールしてアニメーションが始まる位置に到達したら.activeを切り替える、という意味になります。
CSSはこちらです。
.active {
background-color: red;
}HTMLはそのままで.activeは付いていません。
<div class="container">
<div class="box"></div>
</div>この状態でスクロールして.activeが付与されたらボックスの背景色は変わるということです。
そしてトグルスイッチなので、スクロールを戻したら.activeは外れて背景色も戻ります。
こちらがサンプルです。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回はGSAPのプラグインScrollTrigerを使い、toggleClassメソッドでクラスの付け外しをする方法を解説しました。
今回のように背景色を変えるだけならこれを使わなくても大丈夫ですが、こういうことも出来るというのは知っておいて損はないかと思います。
以上になります。
