83.3K+ダウンロード
使い方ガイドへスキップ
gsap-performance作者 GreenSock

GSAP Performance スキル。

Claude Code と Codex 向けのモーションとビデオスキル：GSAP パフォーマンス：transform、レイアウトスラッシングの回避、will-change、バッチング。

  • モーションと動画
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- name: gsap-performance description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
2026-09-14 にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全体で 4,105 文字

01 できること

Claude Code と Codex における gsap-performance スキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

アニメーションを滑らかな60fpsに保つための GSAP 公式ガイダンスで、コストの低いプロパティを選び、レイアウト処理を避けることに重点を置いています。width、height、top、left、margin、padding ではなく、transform 系のキー（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）と opacity をアニメーションさせること、will-change は実際にアニメーションする要素にのみ CSS で指定すること、DOM の読み取りをすべて書き込みより先に行い、レイアウトのスラッシングを防ぐことを指示します。

バッチ処理に関するガイダンスでは、手動で delay を設定した tween の代わりに stagger を使うこと、長いリストには virtualization を用いること、マウス追従には gsap.quickTo() を使うこと、pin と scrub の調整をデバウンスされた ScrollTrigger.refresh() で行うこと、画面外の tween を kill することが説明されています。これは既存の GSAP アニメーションを調整するデザイナーや開発者向けであり、新規に構築するためのものではありません。

生成されるもの

  • アニメーションする要素の CSS に追加する will-change 宣言。
  • コンテナ上の mousemove リスナーによって駆動される、x と y のための gsap.quickTo() の設定。
プロンプト例を見る ↗

仕組み

  1. 01
    コンポジタに適したプロパティをアニメーションさせる

    アニメーションを transform 系のキーと opacity に限定することで、処理をコンポジタ上に留め、レイアウトやペイントの発生を防ぎます。

  2. 02
    書き込みの一括処理は GSAP に任せる

    GSAP は内部でアップデートを既にバッチ処理しているため、リスクとなるのはその周辺で読み取りと書き込みを混在させる自分自身の DOM コードです。

  3. 03
    頻繁に更新される値には1つの tween を再利用する

    ポインタの移動ごとに更新されるプロパティについては、gsap.quickTo() が更新ごとに新しい tween を割り当てるのではなく、1つの tween を維持し続けます。

  4. 04
    スクロール駆動の処理を抑える

    scrub: 1 のような小さな scrub 値はスクロール中の処理量を削減できますが、ファイルではその設定を低スペックデバイスでテストするよう指示しています。

  5. 05
    見えていないアニメーションを停止する

    画面外や非アクティブなアニメーションは一時停止または kill します。例えば、ユーザーがそのセクションから離れた場合などです。

02 適合性を確認

gsap-performance Skill を使用するタイミング

Claude Code または Codex でこの種類のモーションと動画の作業を行う際に gsap-performance スキルを使用してください。適合性と制限事項は、スキル自身のファイルから引用しています。

適している場合

  • 既存の GSAP アニメーションがフレームを落としており、そのレイアウトとペイントのコストを削減したい場合。
  • 誰かが GSAP プロジェクトにおける jank、FPS、または高速なアニメーションのベストプラクティスについて質問してきた場合。
  • 長いリストをアニメーションさせていて、virtualization と数百の tween を同時に走らせないようにする方法についてアドバイスが必要な場合。
  • スクロールセクションが要素を pin していて、promote する対象を制限する必要がある場合。

境界を知る

  • とりあえず全てに will-change や force3D を設定するのは明確に誤りです。これらは実際にアニメーションしている要素にのみ使うものです。
  • 低スペックデバイスでテストされていない場合、数百の重複する tween や ScrollTrigger はアンチパターンとして扱われます。

提供すべきもの

  • 現在アニメーションが変更しているプロパティtransform と opacity がレイアウトの重いプロパティを置き換えられるかどうかを判断するには、何がアニメーションされているかを知る必要があります。

03 スキルの内部

gsap-performance スキルが Claude Code と Codex に与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. レイアウトを発生させるプロパティを避ける

    width、height、top、left、margin、padding はレイアウトを発生させ、ジャンクの原因になるため、transform で同じ効果が得られる場合は避けてください。

  2. Left と Top ではなく X と Y で移動する

    GSAP の x と y はデフォルトで transform（translate）になるため、移動には left や top ではなくこれらを使用してください。

  3. will-change はアニメーションする要素にのみ設定する

    will-change はアニメーションする要素の CSS に設定してください。これはブラウザにレイヤーの昇格を促すヒントとなるため、アニメーションする要素にのみ付与すべきです。

  4. 手動の delay ではなく stagger を使用する

    複数の要素で同じアニメーションを行う場合は、個別に delay を書いた多数の tween ではなく stagger を使用してください。

  5. フレームごとにタイムラインを作成しない

    タイムラインは再利用してください。フレームごとに新しいタイムラインを作成するのは無駄が多いとされています。

  6. 実際のレイアウト変更時のみ ScrollTrigger を refresh する

    コンテンツの読み込み後など、レイアウトが実際に変化したときにのみ ScrollTrigger.refresh() を呼び出してください。リサイズごとに呼び出すのは避け、可能であればデバウンスしてください。

  7. 開始したものは後始末する

    画面外のアニメーションはクリーンアップまたは停止し、レイアウトが変化した際は ScrollTrigger を（可能であればデバウンスして）refresh してください。必要がなくなった後も動作し続けるものがないようにします。

04 実際に使う

Claude Code または Codex に gsap-performance をインストールします

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに gsap-performance を追加します

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance

skills/gsap-performance/SKILL.md 用の汎用的な skills CLI 形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初のモーション・動画タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • DOM の読み取りと書き込みが入り交じっていないか確認してください。これは繰り返しのレイアウトスラッシングの原因となるため、読み取りをすべて先に行うべきです。
  • 何も動き続けていないことを確認してください。使われなくなった tween や ScrollTrigger が動作し続けると、パフォーマンスと正しさの両方を損ないます。
  • アニメーションさせるプロパティが transform と opacity のままであることを確認してください。これによりブラウザはコンポジット処理のみで済みます。

OpenDesign では gsap-performance が同梱されています。Plugins → Skills でトップバーから選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
GreenSock
Repository
github.com/greensock/gsap-skills ブランチ main
スキルファイル
skills/gsap-performance/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット aed9cfd
License
MIT LICENSE より。SKILL.md には「MIT」と記載されています。
リポジトリスター数
15,248 GitHub スナップショットは 2026-09-14 に greensock/gsap-skills リポジトリ全体に対して取得されました。このカタログには 8 つのスキルが含まれています。gsap-performance の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱（2026-08-28 確認）。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. このスキルを使用する場面GSAP アニメーションを 60fps やジャンクの観点で最適化する際に適用します。関連スキルも示されています。
  2. Transform と Opacity を優先するtransform 系のキーと opacity をアニメーションさせ、レイアウトプロパティは避けてください。left や top ではなく x と y を使用します。
  3. will-changeアニメーションする要素の CSS に will-change を追加し、レイヤー昇格のヒントを与えます。
  4. 読み取りと書き込みをまとめるGSAP は書き込みをバッチ処理します。スラッシングを避けるため、DOM の読み取りはすべて書き込みの前に行ってください。
  5. 要素が多い場合（Stagger、リスト）stagger は手動の delay より優れています。長いリストは virtualize し、新しいタイムラインを作る代わりに再利用してください。
  6. 頻繁に更新されるプロパティ（例：マウス追従）頻繁に更新される x と y の値には、mousemove ハンドラーと組み合わせて gsap.quickTo を使用してください。
  7. ScrollTriggerとパフォーマンス必要な要素だけをピン留めし、小さめのscrub値を試し、レイアウトが変化したときのみrefreshしてください。
  8. 同時実行数を減らす画面外のアニメーションは一時停止または停止し、負荷の高いプロパティアニメーションは簡略化またはシーケンス化してください。
  9. ベストプラクティス4項目のチェックリスト：transformとopacity、範囲を限定したwill-change、stagger、クリーンアップとrefresh。
  10. やってはいけないことアンチパターン：移動にレイアウトプロパティを使う、will-changeやforce3Dを一括適用する、量をテストしない、クリーンアップを無視する。
スキル自身による説明
「パフォーマンスに関する公式 GSAP スキル — transform を優先、レイアウトスラッシングを回避、will-change、バッチ処理。GSAP アニメーションの最適化、ジャンクの削減、またはユーザーがアニメーションパフォーマンス、FPS、滑らかな 60fps について質問した場合に使用します。」

SKILL.md からのフロントマター説明です。完全なファイルは約 4,105 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

gsap-performance スキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

gsap-coreの代わりにこれを使えばいいですか？

いいえ。このスキルは通常のGSAP作業の上に位置するパフォーマンス層です。アニメーションはgsap-core（transform、autoAlpha）とgsap-timelineで構築し、ScrollTriggerのパフォーマンスの詳細はgsap-scrolltriggerにあります。

マウスフォロワーはどのように構築すればいいですか？

x値とy値についてdurationとeaseを指定し、gsap.quickTo()を使用し、返された関数をmousemoveリスナーから呼び出してください。更新ごとに新しいtweenを作成するのではなく、単一のtweenを再利用します。

GSAP Performance

実際のモーション & ビデオタスクで gsap-performance を実行します。

gsap-performance スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance