mcpField
G
gsap-performance

gsap-performance

github.com/nexu-io開発104.6k2.1k 回インストール1 日前に更新
リポジトリ

gsap-performance について

GSAP のアニメーション性能を最適化する開発者向けスキルです。レイアウト負荷の軽減、同時実行するアニメーションの管理、スクロール効果の調整方法を扱います。

主な機能

  1. 01transform と opacity を優先
  2. 02レイアウトの読み書きをまとめる
  3. 03stagger で複数要素をアニメーション
  4. 04高頻度更新に gsap.quickTo() を使用
  5. 05画面外のアニメーションと ScrollTrigger を整理

活用シーン

  1. 01アニメーションのカクつきやフレーム落ちの調査
  2. 02長いリストのアニメーション最適化
  3. 03マウス追従アニメーションの実装
  4. 04ScrollTrigger の性能調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill gsap-performance

インストール後、Claude Code で/gsap-performanceを入力して読み込まれたか確認します。

同梱ファイルLICENSESOURCES.md

詳細

GSAP のパフォーマンス

GreenSock の公式 GSAP スキルから厳選：https://github.com/greensock/gsap-skills

このスキルを使う場面

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

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

頻繁に更新されるプロパティ（例：マウス追従の 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 が実行され続けると、パフォーマンスや正確性に悪影響を及ぼすことがあります。

コメント

Markdown 対応