gsap-performance

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 を使用すると、より効率的です。
• 長いリストでは、仮想化を検討するか、表示されている項目だけをアニメーションさせてください。カクつきの原因になる場合は、何百ものトゥイーンを同時に作成しないでください。
• 可能な場合はタイムラインを再利用し、毎フレーム新しいタイムラインを作成しないでください。

頻繁に更新されるプロパティ（例：マウス追従）

頻繁に更新されるプロパティ（例：マウス追従の 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 をアニメーションさせます。CSS の will-change は、アニメーションする要素にのみ使用してください。
• ✅ 同じアニメーションに複数のトゥイーンと手動の遅延を使う代わりに、stagger を使用します。
• ✅ 頻繁に更新されるプロパティ（例：マウス追従）には、gsap.quickTo() を使用します。
• ✅ 画面外のアニメーションをクリーンアップするか停止します。レイアウトが変わったときに ScrollTrigger.refresh() を呼び出し、可能であればデバウンスしてください。

避けること

• ❌ x／y／scale で同じ見た目を実現できる場合、移動のために width／height／top／left をアニメーションさせないでください。
• ❌ 「念のため」にすべての要素へ will-change や force3D を設定しないでください。実際にアニメーションする要素にのみ使用してください。
• ❌ 低性能デバイスでテストせずに、何百もの重複するトゥイーンや ScrollTrigger を作成しないでください。
• ❌ クリーンアップを怠らないでください。不要なトゥイーンや ScrollTrigger が実行され続けると、パフォーマンスや正確性が損なわれる可能性があります。