【GSAP】ScrollTrigerのtoggleClassでクラスの付け外しをする方法

GSAPでスクロールしていったら要素にクラスを付けることって出来る？

GSAPではScrollTrigerというプラグインを使えば、スクロールして画面内に入ったらアニメーションを開始させることが出来ます。

そのタイミングでtoggleClassというメソッドを使うとクラスの付け外しが出来ます。

jQueryでもtoggleClassはあり、それについては以下の記事を参照下さい。

またGSAPを使ったことがないという人は以下の記事を参照下さい。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

GSAPのScrollTrigerでtoggleClassを使ってクラスの付け外しをする方法

それでは早速解説していきますが、今回はScrollTrigerというGSAPのプラグインを使うので使ったことがない人は以下の記事を参照下さい。

それではまずこちらのサンプルをゆっくりスクロールして下さい。

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メソッドでクラスの付け外しをする方法を解説しました。

今回のように背景色を変えるだけならこれを使わなくても大丈夫ですが、こういうことも出来るというのは知っておいて損はないかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！