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: 1）を使用した scrub は、スクロール中の作業を削減できます。低スペックデバイスでテストしてください。
• ScrollTrigger.refresh() はレイアウトが実際に変更された場合（例：コンテンツ読み込み後）のみ呼び出します。すべてのリサイズで呼び出さないでください。可能な場合はデバウンスします。

同時作業の削減

• 画面外または非アクティブなアニメーションが表示されていない場合（例：ユーザーが移動した場合）、一時停止またはキルオフします。
• 多くのエレメントで膨大な数のプロパティをアニメーション化しないでください。必要に応じて簡素化またはシーケンスしてください。

ベストプラクティス

• ✅ transform と opacity をアニメーション化します。will-change は実際にアニメーション化するエレメントの CSS のみで使用します。
• ✅ アニメーションが同じ場合、手動遅延を持つ多くの個別のトウィーンの代わりに stagger を使用します。
• ✅ 頻繁に更新されるプロパティ（例：マウス フォロワー）に gsap.quickTo() を使用します。
• ✅ 画面外のアニメーションをクリーンアップまたはキルオフします。レイアウト変更時に ScrollTrigger.refresh() を呼び出し、可能な場合はデバウンスします。

しないこと

• ❌ x/y/scale で同じ外観を実現できる場合、移動に width/height/top/left をアニメーション化しないでください。
• ❌ 「念のため」すべてのエレメントに will-change または force3D を設定しないでください。実際にアニメーション化するエレメント用に使用します。
• ❌ 低スペックデバイスでテストせずに、数百の重複するトウィーンまたは ScrollTrigger を作成しないでください。
• ❌ クリーンアップを無視しないでください。取り残されたトウィーンと ScrollTrigger は実行し続け、パフォーマンスと正確性に悪影響を与える可能性があります。