GSAP-toggleClass | WebCanta

はじめに

概要

scrollTriggerと連動して使えるの機能の一つがtoggleClassです。JavaScriptのtoggleメソッドと同様の考え方で、スクロール開始と同時にクラスを追加し、終了とともにそのクラスが削除されます。これを活用することで、さまざまなアニメーション効果を実現できますので、ぜひマスターして活用してください。なお、こちらの記事はscrollTriggerを理解したことが前提となっています。scrollTriggerについての詳細は、こちらの記事を参照してください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

便利なscrollTriggerのオプション— Gsap-toggleClass —は、最初にどこを理解するとよいですか？

木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

toggleClassで出来ること

toggleClassで出来ることでは、便利なscrollTriggerのオプション— Gsap-toggleClass —を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

当サイトのサイドバーのアニメーションを例に見ていきましょう。

サイドバーのアニメーション

以下の動画では、Gsapのmarkersを使用しています。これにより、サイドバーのアニメーションの挙動がわかりやすく表示されています。

toggleClassで出来ることで押さえたいポイント

toggleClassで出来ることは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

toggleClassの使い方

toggleClassの使い方では、便利なscrollTriggerのオプション— Gsap-toggleClass —を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

javascript

function setScrollTrigger(trigger, target) {
  gsap.timeline({
    scrollTrigger: {
　　// スクロールを開始するクラスを指定。ここではtriggerという引数を記述
      trigger,
      start: "top 50%",
      end: "bottom 50%",
      markers: true,
　　　　　　　　　　　　// toggleClassの記述
      toggleClass: {
　　　　　　　　　　　　　　　　// 付与したいクラスを指定
        targets: target,
　　　　　　　　　　　　　　　　// 付与したいクラス名を指定
        className: "is-active",
      },
    },
  });
}

setScrollTrigger(".js-1", ".target-1");

以下の関数は、引数を設定して再利用できるように設定されています。これはscrollTriggerの中で使用することができます。付与したいクラスとクラス名を指定することができます。実際にスクロールして挙動をデベロッパーツールで確認してみましょう。

デベロッパーツールで挙動を確認

CSS

.target-1.is-active {
  background-color: #cce4ff;
}

上記を記述することで、.is-acrive(名前は任意)が付与した際にアニメーションが開始され終了と共にbackground-colorが外れることになります。

toggleClassの使い方で押さえたいポイント

toggleClassの使い方は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

実装前に確認しておきたいこと

ここでは、便利なscrollTriggerのオプション— Gsap-toggleClass —を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

便利なscrollTriggerのオプション— Gsap-toggleClass —が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

実務で使うための進め方

便利なscrollTriggerのオプション— Gsap-toggleClass —を実務で使うときは、完成形を一度に作ろうとせず、最小のサンプルで動作を確かめてから既存ページへ組み込みます。確認できた処理を少しずつ広げると、記事の例と自分の環境に差があっても調整しやすくなります。

小さなサンプルから試す

新しいコードや設定は、関係する要素だけを置いた小さなページで試します。期待する結果、実際の結果、変更した箇所を短く記録すると、途中で別の方法を試した場合にも比較できます。動作を確認できた後で、既存の命名規則やファイル構成へ合わせて移してください。

既存の実装と重複していないか確認する

同じ目的のCSS、JavaScript、プラグイン設定がすでに存在すると、指定の上書きや処理の二重実行が起きることがあります。検索機能や開発者ツールを使い、同じクラス名、関数名、フック、設定項目がないかを先に確認しましょう。

保守しやすい状態を保つ

実装時に動くだけでなく、数か月後に見直せる状態にしておくことも大切です。採用した理由と確認方法を短く残しておけば、仕様変更や担当者の交代があっても安全に更新できます。

変更理由を短く記録する

コメントや作業メモには、コードの内容をそのまま説明するのではなく、なぜその処理が必要なのかを書きます。参照した公式情報や動作確認日も残すと、仕様が変わったときに見直す判断材料になります。秘密情報や個人の環境だけで使えるパスは記録へ含めません。

定期的に動作を見直す

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。ブラウザー、WordPress、プラグイン、外部サービスを更新した後にも同じ項目を確認すると、変更による影響を早めに見つけられます。

まとめ

Gsapのスクロールアニメーションを活用すれば、あらゆる動作が可能になる
toggleClassが容易に使用できる
関数にまとめれば使い回しができる

こちらの記事がとても参考になりました。ありがとうございます。

便利なscrollTriggerのオプション— Gsap-toggleClass —

目次