fixing-motion-performance

fixing-motion-performance

使用するタイミング

レイアウトスラッシング、コンポジタプロパティ、スクロール連動モーション、ブラー効果など、アニメーションのパフォーマンス問題を監査して修正する必要があるときにこのスキルを使用します。アニメーションがカクつく場合、トランジションがぎこちない場合、または CSS/JS アニメーションのパフォーマンスをレビューする場合に使用します。

アニメーションのパフォーマンス問題を修正します。

使用方法

• /fixing-motion-performance この会話におけるすべての UI アニメーション作業にこれらの制約を適用します。

• /fixing-motion-performance <file> 以下のすべてのルールに照らしてファイルをレビューし、報告します:

  • 違反 (該当する行またはスニペットを正確に引用)
  • なぜ重要か (短い一文)
  • 具体的な修正案 (コードレベルの提案)

明示的に要求されない限り、アニメーションライブラリの移行は行わないでください。既存のスタック内でルールを適用してください。

適用するタイミング

次の場合にこれらのガイドラインを参照してください:

• UI アニメーション (CSS、WAAPI、Motion、rAF、GSAP) を追加または変更する場合
• ぎこちないインタラクションやトランジションをリファクタリングする場合
• スクロール連動モーションやスクロール時の表示 (reveal-on-scroll) を実装する場合
• レイアウト、フィルター、マスク、グラデーション、CSS 変数をアニメーション化する場合
• will-change、transform、測定を使用するコンポーネントをレビューする場合

レンダリングステップの用語集

• composite: transform、opacity
• paint: color、borders、gradients、masks、images、filters
• layout: size、position、flow、grid、flex

優先度別のルールカテゴリ

優先度	カテゴリ	影響度
1	禁止パターン	重大
2	メカニズムの選択	重大
3	測定	高
4	スクロール	高
5	ペイント	中〜高
6	レイヤー	中
7	ブラーとフィルター	中
8	ビュートランジション	低
9	ツールの境界	重大

クイックリファレンス

1. 禁止パターン (重大)

• 同じフレーム内でレイアウトの読み取りと書き込みを交互に行わない
• 大きい、または重要なサーフェスでレイアウトを継続的にアニメーション化しない
• scrollTop、scrollY、またはスクロールイベントからアニメーションを駆動しない
• 停止条件のない requestAnimationFrame ループを使用しない
• それぞれがレイアウトを測定または変更する複数のアニメーションシステムを混在させない

2. メカニズムの選択 (重大)

• モーションにはデフォルトで transform と opacity を使用する
• インタラクションで必要な場合にのみ JS 駆動のアニメーションを使用する
• ペイントまたはレイアウトのアニメーションは、小さい孤立したサーフェスでのみ許容される
• 一度きりの効果は、継続的なモーションよりも許容されることが多い
• モーションを完全に削除するよりも、テクニックをダウングレードすることを優先する

3. 測定 (高)

• 一度測定し、その後は transform または opacity でアニメーション化する
• すべての DOM の読み取りを書き込みの前にバッチ処理する
• アニメーション中にレイアウトを繰り返し読み取らない
• レイアウトに似た効果には FLIP スタイルのトランジションを優先する
• 測定と書き込みをバッチ処理するアプローチを優先する

4. スクロール (高)

• 利用可能な場合は、スクロール連動モーションに Scroll Timelines または View Timelines を優先する
• 可視性と一時停止には IntersectionObserver を使用する
• アニメーションのためにスクロール位置をポーリングしない
• 画面外にあるときはアニメーションを一時停止または停止する
• スクロール連動モーションは、大きいサーフェスで継続的なレイアウトまたはペイントをトリガーしてはならない

5. ペイント (中〜高)

• ペイントをトリガーするアニメーションは、小さい孤立した要素でのみ許可される
• 大きいコンテナでペイント負荷の高いプロパティをアニメーション化しない
• transform、opacity、または位置に対して CSS 変数をアニメーション化しない
• 継承された CSS 変数をアニメーション化しない
• アニメーション化する CSS 変数はローカルにスコープし、継承を避ける

6. レイヤー (中)

• コンポジタモーションにはレイヤーの昇格が必要であり、決してそれを前提としない
• will-change は一時的かつ限定的に使用する
• 多数の、または大きい昇格レイヤーを避ける
• パフォーマンスが重要な場合は、ツールを使用してレイヤーの動作を検証する

7. ブラーとフィルター (中)

• ブラーのアニメーションは小さく保つ (<=8px)
• ブラーは短時間の一度きりの効果にのみ使用する
• ブラーを継続的にアニメーション化しない
• 大きいサーフェスでブラーをアニメーション化しない
• ブラーより opacity と translate を優先する

8. ビュートランジション (低)

• ビュートランジションはナビゲーションレベルの変更にのみ使用してください
• インタラクションの多い UI ではビュートランジションを避けてください
• 中断やキャンセルが必要な場合はビュートランジションを避けてください
• サイズ変更はレイアウトをトリガーする可能性があるものとして扱ってください

9. ツールの境界 (重要)

• 明示的に要求されない限り、アニメーションライブラリを移行または書き換えないでください
• これらのルールは既存のアニメーションシステム内で適用してください
• API を部分的に移行したり、同じコンポーネント内でスタイルを混在させたりしないでください

一般的な修正

/* layout thrashing: animate transform instead of width */
/* before */ .panel { transition: width 0.3s; }
/* after */  .panel { transition: transform 0.3s; }

/* scroll-linked: use scroll-timeline instead of JS */
/* before */ window.addEventListener('scroll', () => el.style.opacity = scrollY / 500)
/* after */  .reveal { animation: fade-in linear; animation-timeline: view(); }

// measurement: batch reads before writes (FLIP)
// before — layout thrash
el.style.left = el.getBoundingClientRect().left + 10 + 'px';
// after — measure once, animate via transform
const first = el.getBoundingClientRect();
el.classList.add('moved');
const last = el.getBoundingClientRect();
el.style.transform = `translateX(${first.left - last.left}px)`;
requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });

レビューのガイドライン

• 重要なルールを最初に徹底してください (never パターン、ツールの境界)
• 意図に合致する、最もコストの低いレンダリング処理を選択してください
• デフォルト以外の選択を行う場合は、それを正当化する制約 (サーフェスサイズ、duration、またはインタラクション要件) を明記してください
• レビュー時は、理論よりも実行可能な指摘と具体的な代替案を優先してください

制限事項

• このスキルは、タスクがその上流ソースおよびローカルプロジェクトのコンテキストに明確に合致する場合にのみ使用してください。
• 変更を適用する前に、コマンド、生成されたコード、依存関係、認証情報、および外部サービスの動作を検証してください。
• 破壊的または高コストな操作については、例を環境固有のテスト、セキュリティレビュー、またはユーザーの承認の代わりとして扱わないでください。