gsap-performance

gsap-performance スキルの概要

gsap-performance は、アニメーションをより速く、より滑らかに、そしてカクつきにくくするための GSAP ガイド集です。すでにアニメーションの目的は決まっていて、Frontend Development で最もコストの低い実装方法を選びたいときに特に役立ちます。主な役割は、可能な限りモーションをコンポジタに載せること、レイアウトの thrashing を避けること、そして 60fps を崩しやすい paint-heavy な処理を減らすことです。

gsap-performance を使うべき人

既存の GSAP アニメーションをチューニングしたいとき、モーション中心の UI をレビューしたいとき、提案されたアニメーションが本番投入して安全か判断したいときに gsap-performance スキルを使ってください。フロントエンドエンジニア、UI 開発者、そして汎用的なアニメーション提案ではなくパフォーマンスを踏まえた回答が必要な AI 補助コーディングのワークフローに特に向いています。

何を判断できるようになるか

このスキルでは、transform ベースのモーションと layout ベースのモーションのどちらを選ぶべきか、will-change が有効な場面はいつか、読み取りと書き込みをまとめる必要があるのはどんなときかを判断しやすくなります。つまり gsap-performance は、「どうやってこれをアニメーションさせるか」よりも、「どうやってフレーム落ちせずにこれを動かすか」が本当の問いになっている場面で特に価値があります。

GSAP スタックの中での位置づけ

gsap-performance は、基本的なアニメーション構築には gsap-core、スクロール連動のモーションには gsap-scrolltrigger と併用するのが最適です。問題がランタイムコストではなく、タイムライン構造や演出設計にあるなら、別の GSAP スキルのほうが先に確認すべき場合があります。

gsap-performance スキルの使い方

適切な文脈でインストールする

ディレクトリベースのスキル構成なら、次のコマンドでインストールします。

npx skills add greensock/gsap-skills --skill gsap-performance

実際にアニメーションのガイダンスが必要なプロジェクトで gsap-performance install を実行し、モーションコードを書いている最中、レビューしている最中、リファクタリングしている最中にスキルを適用してください。複数アプリをまたいで作業しているなら、パフォーマンスに敏感なアニメーション負荷があるアプリに入れるのが適切です。

パフォーマンス前提のプロンプトにする

gsap-performance usage のパターンが最も効果を発揮するのは、アニメーション対象、動かすプロパティ、環境、症状を具体的に伝えたときです。弱いプロンプトは「もっと滑らかにして」です。より強いプロンプトは次のようになります: 「mobile Safari 向けにこの GSAP の entrance animation を最適化したい。現在は top と width をアニメーションしているので、同じ見た目を保ちながらレイアウトコストを下げたい」

有用なプロンプト要素:

• 要素の種類と数: 1 枚のカード、複数のリスト項目、ヒーローセクション全体など
• 現在アニメーションしているプロパティ
• 懸念しているブラウザやデバイス
• カクつき、遅延、スクロールの引っかかり、フレーム落ちなどの見えている問題
• マークアップ変更不可、見た目変更不可などの制約

スキルファイルは実用的な順で読む

まず SKILL.md を読みます。ここには、このスキルの判断基準がまとめられています。インストール前提で確認するなら、まず「いつ使うか」「transform と opacity の選び方」「will-change」「読み取りと書き込みのバッチ処理」に関するセクションを読んでください。複数のスキルを比較しているなら、関連する GSAP ガイドも軽く確認し、gsap-performance に本来担当していないタイムライン設計の問題まで背負わせないようにしましょう。

主要なワークフローを適用する

このスキルは、モーションの目的をより安価なレンダリング処理に置き換える形で使います。

1. 見た目を保てるなら、レイアウトを引き起こすアニメーションプロパティを transform に置き換える。
2. フェードには、描画済みの形状をアニメーションするのではなく opacity を使う。
3. will-change: transform; は、本当にアニメーションする要素にだけ追加する。
4. 同じホットパス内で DOM の読み取りと書き込みを交互に繰り返さない。
5. デスクトップ Chrome だけでなく、サポート対象の中で最も遅いデバイスやブラウザで再テストする。

gsap-performance guide は、すでに下書きのアニメーションがあり、見た目を変えずにコストを下げたいときに最も役立ちます。

gsap-performance スキル FAQ

gsap-performance は Frontend Development 専用ですか？

はい、最も関係が深いのはそこです。このスキルは、ブラウザのレンダリング挙動、DOM アニメーションのコスト、UI の滑らかさを対象にしています。サーバーサイドやデータ処理だけの作業、あるいは実行時アニメーションと関係しない作業なら、通常はこのスキルは適していません。

通常のプロンプトと何が違いますか？

通常のプロンプトでも一般論として「transform を使う」といった提案はできますが、gsap-performance は GSAP 固有のモーションに対して、より信頼できる判断経路を示します。デザインを transform に切り替えてでも維持すべきか、あるいはレイアウト変更のコストを払う価値があるのか、といった実務的なトレードオフを判断したいときに重要です。

初心者でも先に深い GSAP 知識は必要ですか？

いいえ。ただし、具体的なアニメーション目標は必要です。要素、モーション、困っている点を説明できるほど使いやすくなります。まだ GSAP の基礎を学んでいる段階なら、gsap-performance に構文をゼロから教えてもらうのではなく、gsap-core と組み合わせるのがよいでしょう。

いつ gsap-performance を使わないほうがいいですか？

問題がパフォーマンスではない場合、あるいは主な論点がレンダリングコストではなく、オーケストレーション、シーケンス、スクロールロジックにある場合は避けてください。完全なビジュアルアニメーション仕様が必要な場合にも、最初の選択肢としては適していません。得意なのはクリエイティブディレクションではなく、最適化と実装ガイダンスです。

gsap-performance スキルを改善する方法

Before/After の目標をもっと明確にする

gsap-performance の結果が最も良くなるのは、制約がはっきりしているときです。何を視覚的に維持する必要があるのか、何なら変えてよいのか、どのデバイス वर्गを重視するのかを明示してください。たとえば「カードの出現演出は維持しつつ、layout shift をなくして mobile Safari のカクつきを減らしたい」は、「もっと速くして」よりずっと実行可能な指示です。

実際のボトルネックを明示する

よくある失敗は、スキルに違うものを最適化させようとすることです。ボトルネックが重い shadow、巨大な blur、アニメーション要素の多さ、コストの高い scroll handler にあるなら、その点をはっきり伝えてください。コストの所在を正確に特定できるほど、gsap-performance usage のガイダンスは実用的になります。

具体的なテストケースで反復する

最初の出力を得たら、まず最小の再現ケースで検証し、その後スケールアップしてください。1 要素では問題なくても 30 個のリストになると破綻するなら、バッチ処理、シーケンス調整、あるいは per-frame work を減らすプロパティ変更を求めましょう。gsap-performance skill の価値が最も大きいのは、アニメーションを新しく発明することではなく、実際に出荷できる形へ安全に落とし込むことです。