GSAP パフォーマンス
このスキルを使用するタイミング
GSAPアニメーションを滑らかな60fpsに最適化する場合、レイアウト/ペイントコストを削減する場合、またはユーザーがパフォーマンス、カクつき、高速アニメーションのベストプラクティスについて質問した場合に適用します。
関連スキル: gsap-core（トランスフォーム、autoAlpha）と gsap-timeline でアニメーションを構築します。ScrollTriggerのパフォーマンスについては gsap-scrolltrigger を参照してください。
トランスフォームと不透明度を優先
transform（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）と opacity のアニメーションは、コンポジター上で処理が行われ、レイアウトやほとんどのペイントを回避します。トランスフォームで同じ効果が得られる場合は、レイアウト負荷の高いプロパティのアニメーションは避けてください。
- ✅ 推奨: x、y、scale、rotation、opacity。
- ❌ 可能な限り避ける: width、height、top、left、margin、padding（これらはレイアウトをトリガーし、カクつきの原因になります）。
GSAPの x と y はデフォルトでトランスフォーム（translate）を使用します。移動には left/top の代わりにこれらを使用してください。
will-change
アニメーションする要素にはCSSで will-change を使用します。これにより、ブラウザがレイヤーをプロモートするように指示します。
will-change: transform;
読み取りと書き込みのバッチ処理
GSAPは内部的に更新をバッチ処理します。GSAPと直接のDOM読み取り/書き込みやレイアウト依存のコードを混在させる場合、読み取りと書き込みが交互に発生してレイアウトスラッシングが繰り返されないようにしてください。最初にすべての読み取りを実行し、次にすべての書き込みを実行するか（またはGSAPに一度に書き込みを処理させる）、読み取りと書き込みを交互に行わないようにします。
多数の要素（Stagger、リスト）
- 同じアニメーションの場合、手動で遅延を設定して多数の個別のトゥイーンを作成する代わりに stagger を使用します。より効率的です。
- 長いリストの場合は、仮想化 または表示されているアイテムのみをアニメーション化することを検討し、カクつきの原因となる数百の同時トゥイーンを作成しないようにします。
- 可能な限りタイムラインを再利用し、毎フレーム新しいタイムラインを作成しないようにします。
頻繁に更新されるプロパティ（例：マウスフォロワー）
頻繁に更新されるプロパティ（例：マウスフォロワーのx/y）には gsap.quickTo() を優先します。これにより、更新のたびに新しいトゥイーンを作成する代わりに、単一のトゥイーンを再利用します。
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
ScrollTrigger とパフォーマンス
- pin: true はピン留めする要素をプロモートします。必要なものだけピン留めしてください。
- scrub は小さな値（例：
scrub: 1）でスクロール時の処理を減らせることがあります。ローエンドデバイスでテストしてください。 - ScrollTrigger.refresh() はレイアウトが実際に変更されたとき（例：コンテンツ読み込み後）のみ呼び出し、すべてのリサイズのたびには呼び出さないでください。可能な場合はデバウンスしてください。
同時作業の削減
- 画面外または非アクティブなアニメーションは、表示されていないときに一時停止または削除します（例：ユーザーが別の場所に移動したとき）。
- 多数のプロパティを一度に多数の要素でアニメーション化しないでください。必要に応じて簡略化または順序付けしてください。
ベストプラクティス
- ✅ transform と opacity をアニメーション化します。CSSの will-change はアニメーションする要素にのみ使用します。
- ✅ 同じアニメーションの場合、手動で遅延を設定して多数の個別のトゥイーンを作成する代わりに stagger を使用します。
- ✅ 頻繁に更新されるプロパティ（例：マウスフォロワー）には gsap.quickTo() を使用します。
- ✅ 画面外のアニメーションをクリーンアップまたは削除します。レイアウトが変更されたときに ScrollTrigger.refresh() を呼び出し、可能な場合はデバウンスします。
してはいけないこと
- ❌ 同じ見た目を実現できる x/y/scale があるのに、移動のために width/height/top/left をアニメーション化しないでください。
- ❌ 「念のため」すべての要素に will-change や force3D を設定しないでください。実際にアニメーションする要素にのみ使用します。
- ❌ ローエンドデバイスでテストせずに、数百もの重複するトゥイーンやScrollTriggerを作成しないでください。
- ❌ クリーンアップを無視しないでください。放置されたトゥイーンやScrollTriggerは実行され続け、パフォーマンスと正確性を損なう可能性があります。