ホーム / 全スキル / デザイン＆モーション / gsap-performance
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · greensock/gsap-skills

gsap-performance

パフォーマンス向上のための公式GSAPスキル。transformの優先、レイアウトスラッシングの回避、will-change、バッチ処理を扱います。GSAPアニメーションの最適化、ジャンク（カクつき）の低減、またはアニメーションのパフォーマンス、FPS、滑らかな60fpsに関する質問時に使用します。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author greensockGitHub greensock/gsap-skills ↗Stars 15326License MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）Commit aed9cfd327
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

コアモデルの要約：コンポジタ（合成スレッド）に優しい transform と opacity のみを動かし、レイアウトや再描画（repaint）のトリガーを避ける。

skills/gsap-performance/SKILL.md
keeps work on the compositor and avoids layout and most paint.
謳われている機能が実現できる理由：transform や opacity のアニメーションはレイアウト/リフローを発生させずにコンポジタスレッドへオフロードできますが、width/height/top/left は毎フレーム再レイアウトを引き起こします。本スキルは「パフォーマンス」を単なる「高速化」という抽象論ではなく、実行可能なプロパティ選定ルールへと落とし込んでいます。

will-change の適用境界を厳密に制限：真に動く要素にのみ指定し、無差別に付与しない。

skills/gsap-performance/SKILL.md
It hints the browser to promote the layer.
セットとなる Do Not では、「念のため」としてすべての要素に will-change や force3D を付与することに明確に反対しています。過度なレイヤー昇格はVRAMを浪費し、ローエンド端末ではかえって動作を重くする原因となります。

読み書き分離によるレイアウトスラッシング防止：GSAPと手動のDOM読み書きを混在させる場合、すべての読み取りを完了してから一括して書き込みを行う。

skills/gsap-performance/SKILL.md
Prefer doing all reads first, then all writes
ここで行われていること：ブラウザはレイアウトプロパティの読み取りを強制同期フラッシュとみなすため、読み取りと書き込みの頻繁な交互実行は1フレーム内で複数回のレイアウト計算を引き起こします。本スキルはバッチ処理を行うか、あるいは書き込み処理をGSAPに一任することを推奨しています。

高頻度更新に適したツールは gsap.quickTo()：イベントごとに新しい tween を生成せず、単一の tween を再利用する。

skills/gsap-performance/SKILL.md
It reuses a single tween instead of creating new tweens on each update.
典型的なユースケースはマウス追従（毎フレーム発火する mousemove）です。毎回 gsap.to() を呼ぶと新規 tween オブジェクトが生成されガベージコレクションへの負荷が高まりますが、quickTo は繰り返し呼び出し可能なセッター関数を返します。

複数要素に対して「同等効果なら負荷が低い方を選ぶ」置換ルールを提示：手動の delay の羅列を stagger に置き換え、長いリストは仮想化するか可視要素のみをアニメーション化する。

skills/gsap-performance/SKILL.md
- Use **stagger** instead of many separate tweens with manual delays when the animation is the same;
また、数百個の tween を同時に実行することの回避や、フレームごとの timeline 新規作成の禁止についても、「Many Elements」「Reduce Simultaneous Work」セクションで提示しています。

ScrollTrigger のパフォーマンス面での推奨事項を独立セクション化：pin の使用を控えめにし、scrub には数値を指定、refresh はレイアウトが実際に変化した時のみデバウンスして呼び出す。

skills/gsap-performance/SKILL.md
Call **ScrollTrigger.refresh()** only when layout actually changes (e.g. after content load), not on every resize; debounce when possible.
gsap-scrolltrigger の refresh セマンティクスと相互補完の関係にあります。あちらが「いつリフレッシュすべきか」を解説しているのに対し、こちらは「過度な頻度でのリフレッシュを避ける」点に焦点を当てています。

クリーンアップをパフォーマンス要件として位置づけ：画面外や非アクティブなアニメーションは一時停止または kill し、メインスレッドとメモリの継続的な占有を防ぐ。

skills/gsap-performance/SKILL.md
❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.
同じ Do Not の中で「パフォーマンス」と「正確性」が並列して扱われています。残存した tween が削除済みノードを更新し続けることは、パフォーマンス問題であると同時にバグの温床にもなります。

2コア機能

01プロパティ選定の最適化：transform系（x/y/scale/rotation/skew）および opacity を優先し、width/height/top/left/margin/padding を回避
02will-change によるレイヤー昇格の指針（実際に動く要素にのみ適用）
03読み書きのバッチ処理：手動DOM操作との交差によるレイアウトスラッシングの防止
04gsap.quickTo()：高頻度更新プロパティ（マウス追従など）における単一 tween の再利用
05複数要素向けの戦略：stagger による統合、長大リストの仮想化、数百個の並行 tween の回避
06ScrollTrigger のチューニング：pin の抑制、scrub への数値指定、refresh のデバウンス
07クリーンアップと負荷軽減：画面外アニメーションの停止/破棄、同時実行プロパティ数の削減

3外部依存関係

KindDependency / Endpoint
packagegsap（quickTo 属核心 API）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
  • SKILL.md: プロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への影響は一切なし
監査ノート： 純粋な指示型スキル：ディレクトリ内には SKILL.md（4,139 B）のみが存在し、スクリプト、ネットワーク呼び出し、外部リンク、認証情報の読み取り、ファイル書き込みは一切含まれていません。レンダリングパフォーマンスに関するトレードオフの提案（transform/opacity の優先、will-change の境界、quickTo、refresh のデバウンス、クリーンアップ）に終始しており、外部へのアタックサーフェスは皆無です。留意点としては提案の適用境界のみであり、ローエンド端末での最適なパラメータは実測が必要となります（スキルは固定的な閾値ではなく指針を提供するものです）。

5二重目の独立検証

  • [ok] 目录资产面：仅 SKILL.md — skills/gsap-performance/ 下唯一文件 SKILL.md（4,139 B）；无 scripts/、references/、数据文件；URL 扫描 0 条。
  • [ok] external_deps 只剩 gsap 包 — 文件内无任何 URL 或第三方工具引用，仅使用 gsap.quickTo 与 ScrollTrigger.refresh 等本体 API；包依赖证据取自 README 安装段。
  • [ok] quickTo 的描述是否与官方一致 — gsap.quickTo(target, property, vars) 返回可反复调用的函数、内部复用单个 tween，与官方 API 语义一致；示例（mousemove 中调用 xTo/yTo）即官方推荐写法。
  • [ok] 「scrub 数值可减少滚动期工作量」是否为夸大 — 原文措辞为「**scrub** with a small value (e.g. `scrub: 1`) can reduce work during scroll; test on low-end devices.」——带不确定性限定与实测建议，非断言，不构成夸大。
  • [ok] 安全反例搜索 — token 扫描：curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 零命中；无外部资源引用。
  • [ok] 与 gsap-scrolltrigger 的 refresh 叙述是否冲突 — scrolltrigger 要求布局变化后必须 refresh()（否则位置失准），performance 要求不要每次 resize 都 refresh 并去抖——两者互补而非矛盾（resize 本就被 ST 自动去抖处理）。
  • [ok] 元数据与 pin — frontmatter license: MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
  • [ok] 是否只是「常识复述」（价值质疑） — 文中给出具体替换对象（width/height/top/left → x/y/scale）、具体 API（quickTo）、具体数值建议（scrub: 1）与具体反例（just in case 加 will-change），超出泛泛常识。

6結論

  • パフォーマンス提案をプロパティレベルの具体的なルール（代替手段の提示）として落とし込んでおり、コードレビューに即時活用可能。
  • 高頻度更新に適したツールとして quickTo を提示し、「イベントごとの新規 tween 生成」という典型的なパフォーマンスの落とし穴を回避。
  • 読み書きの交差実行（レイアウトスラッシング）という、見落とされがちな混在ユースケースをカバー。
  • クリーンアップをパフォーマンスと正確性の両面から位置づけ、「とりあえずリリース」による不要な残存アニメーションを抑制。
  • 極めて軽量なサイズ（4,139 B）でパフォーマンス上の懸念事項を網羅しており、読み込みコストがほぼゼロなため常駐ルールとして最適。
    • 最適な用途： すでにGSAPアニメーションが導入されており、フレーム落ちやカクつきが発生しているプロジェクトの最適化フェーズ、または新規プロジェクトにおけるアニメーション規約のチェックリストとして最適。モバイル端末、ローエンド機器、長大リスト、マウス追従型インタラクションで特に効果を発揮します。
    不向きな用途： まだ正常に動作していないプロジェクト（最適化の前に、まずは gsap-core や gsap-timeline に従って正しく実装すべきです）；パフォーマンスの計測や自動プロファイリングが必要な環境（ツールではなくルールのみを提供するため）；GSAPではなくCSSアニメーションを採用しているプロジェクト（一部の考え方は応用可能ですが、quickTo や stagger などのAPI提案は適用できません）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload gsap-performance.tar.gz
    sha256: a5bb2ad20a79ec59…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit aed9cfd327.