スキル自身の言葉で
React および Next.js などの React ベースのフレームワークにおけるアニメーションのための公式 GSAP スキルです。useEffect() や useLayoutEffect() の代わりに @gsap/react の useGSAP() フックを推奨し、gsap.registerPlugin で登録した上で、.box のようなセレクターがコンポーネント内の要素だけにマッチするように scope を必須とします。
ターゲットとしての ref、フックの任意の第二引数（依存配列、または dependencies/scope/revertOnUpdate の設定オブジェクト）、フック実行後にポインターハンドラー内で作成されるアニメーション用の contextSafe、そして通常の useEffect に対する gsap.context() と ctx.revert() のフォールバックについて扱っています。また、SSR に関するルールも明記されています。GSAP はブラウザで実行されるため、サーバーレンダー中には何も実行してはならないという点です。
生成されるもの
- アニメーションと ScrollTrigger がアンマウント時に自動的に revert される useGSAP ブロック
- ctx.revert() を呼び出すクリーンアップを返す useEffect の本体
- 返り値のクリーンアップでイベントリスナーを削除する、contextSafe でラップされたクリックハンドラー
- クライアントのみでの実行、また tree-shaking やバンドルサイズ削減のための選択肢として useEffect 内での動的インポート
仕組み
- 01Gsap と @gsap/react をインストールする
インストールブロックには2つのパッケージが記載されています。GSAP ライブラリ本体と、フックを提供する GSAP React パッケージです。
- 02GSAP コードより先に useGSAP を登録する
このフックはプラグインとして登録され、useGSAP や他の GSAP コードを実行する前にこの登録を行う必要があると記載されています。
- 03scope を指定して useGSAP 内にアニメーションを記述する
ref や要素を scope として渡すことで、セレクターの範囲がコンポーネントのルートに限定されます。
- 04レンダー後のコールバックを contextSafe でラップする
ポインターイベントハンドラーなどで後から作成されるアニメーションはコンテキストの外に位置するため、フックの返り値から取得した contextSafe でラップされます。
- 05gsap.context() と ctx.revert() へのフォールバック
useGSAP が使えない場合は、同じパターンを useEffect 内で実行し、クリーンアップで必ず ctx.revert() を呼び出します。
- 06すべての GSAP コードをクライアント側に保つ
サーバーレンダーでの実行を防ぐのは useGSAP または useEffect であり、バンドルサイズが問題になる場合は useEffect 内での動的インポートが選択肢として提示されています。