GSAP パフォーマンス
このスキルを使用するタイミング
GSAPアニメーションを滑らかな60fpsに最適化するとき、レイアウト/ペイントコストを削減するとき、またはユーザーがパフォーマンス、カクつき、高速アニメーションのベストプラクティスについて質問したときに適用します。
関連スキル: gsap-core（transform、autoAlpha）とgsap-timelineでアニメーションを構築。ScrollTriggerのパフォーマンスについてはgsap-scrolltriggerを参照。
Transform と Opacity を優先
transform（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）と opacity のアニメーションは、作業をコンポジター上に保ち、レイアウトとほとんどのペイントを回避します。transformで同じ効果を達成できる場合は、レイアウト負荷の高いプロパティのアニメーションを避けてください。
- ✅ 推奨: x、y、scale、rotation、opacity。
- ❌ 可能な限り避ける: width、height、top、left、margin、padding（これらはレイアウトをトリガーし、カクつきの原因になります）。
GSAPのxとyはデフォルトでtransform（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()**を呼び出し、可能な場合はデバウンス。
してはいけないこと
- ❌ width/height/top/left を移動のためにアニメーション化する（x/y/scale で同じ外観を実現できる場合）。
- ❌ 「念のため」すべての要素に will-change または force3D を設定する。実際にアニメーションする要素にのみ使用。
- ❌ ローエンドデバイスでテストせずに、何百もの重複するトゥイーンやScrollTriggerを作成する。
- ❌ クリーンアップを無視する。残存トゥイーンやScrollTriggerは実行され続け、パフォーマンスと正確性を損なう可能性があります。