1仕組みと動作原理
APIを説明する前に「ライセンスの誤解」を解消：冒頭のセクションで「Club GSAPは有料／auth tokenが必要／プライベートレジストリが必要」という時代遅れの情報に特化して是正し、唯一の正しいインストール手順を提示。
skills/gsap-plugins/SKILL.md
Every GSAP plugin is **free**, including for commercial use.
宣伝機能を実現できる理由：モデルの知識ベースには「SplitText/MorphSVGは有料のClubプラグインであり、.npmrcのトークンが必要」という古い情報が残りがちです。明示的に補正しない場合、エージェントは誤ったインストール手順を生成してユーザーに会員購入を促してしまいます。この指示は事実是正型のパッチとして機能します。
登録パラダイムの統一：すべてのプラグインは使用前に必ず gsap.registerPlugin() で事前登録し、登録箇所はアプリケーション層（再レンダリングされるコンポーネント外）に固定。
skills/gsap-plugins/SKILL.md
Register each plugin once so GSAP (and bundlers) know to include it.
ここで行われていること：プラグイン登録は「バンドラーにプラグインをtree-shakeさせないよう指示する」役割も兼ねています。本スキルは useGSAP 自体も登録が必要なプラグインであることを明記し、Reactユーザーが登録を忘れてフックが動作しなくなる問題を防ぎます。
機能領域ごとのマニュアル構成：Scroll / DOM-UI / Text / SVG / Easing / Physics / Development / Other に分割し、各プラグインに最小動作コード＋主要パラメータ一覧を添付。
skills/gsap-plugins/SKILL.md
gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
ScrollToPlugin/Flip/Draggable の3点セットを組み合わせたパターンなどを網羅し、複数プラグインを一括登録する記法もサンプル内に記載しています。
SplitText の使い方を「ライフサイクルへのバインド」レベルまで解説：単なる「文字分割とstagger」にとどまらず、autoSplit + onSplit の戻り値を用いた自動リセットと進捗同期を指導。
skills/gsap-plugins/SKILL.md
Animations must be created inside onSplit()
重要ポイント：autoSplit はフォントの読み込み完了時や幅の変更時に再分割を行うため、再分割後に古いアニメーションを破棄できる構造が必要です。そのため、アニメーションは onSplit 内で構築してtweenを SplitText に返す必要があります。aria / mask / smartWrap / wordDelimiter などのアクセシビリティや多言語対応のディテールも併記しています。
MorphSVG の基礎からパラメータ調整までを完全網羅：shapeIndex の位置合わせ、map のマッチング戦略、smooth/curveMode/precompile などのパフォーマンス設定、Canvasへの render 描画。
skills/gsap-plugins/SKILL.md
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line");
precompile:"log" や shapeIndex:"log" のような「一度ログ出力させてから設定値に反映する」といった、試行錯誤のコストを抑える実践的テクニックも明記されています。
開発専用プラグインに対する明確な境界線の設定：GSDevTools や markers などのデバッグ用ツールは本番環境へ持ち込まない。
skills/gsap-plugins/SKILL.md
❌ Ship GSDevTools or development-only plugins to production.
gsap-scrolltrigger の markers に関する要件と足並みを揃え、リポジトリ全体で一貫したプロダクション規律を形成しています。
暗黙的なプラグイン依存関係の明示化：Draggable の慣性スロー機能には InertiaPlugin の同時登録が必須。
skills/gsap-plugins/SKILL.md
gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable の inertia: true は InertiaPlugin が存在しないと警告なしに機能しなくなります。本スキルでは登録コードの例を通じて、この隠れた依存関係を明示化しています。
2コア機能
01プラグインの登録とバンドル：registerPlugin の使用タイミングおよび複数プラグインの一括登録
02ScrollToPlugin：特定位置/要素へのスクロール（x、y、element、offsetX/offsetY、"max" 指定を含む）
03ScrollSmoother：スムーズスクロール用のラッパーと必須となるDOM構造
04Flip：getState → DOM変更 → from() によるFLIPアニメーション（absolute/nested/scale/simple）
05Draggable + Inertia：ドラッグ／回転／慣性スロー（bounds/edgeResistance/onThrowUpdate を含む）
06Observer：デバイスを跨いだポインター／ホイールジェスチャーの正規化（onUp/onDown/onLeft/onRight/tolerance/type）
07テキストおよびSVG：SplitText（chars/words/lines、autoSplit、mask、aria）、ScrambleText、DrawSVG、MorphSVG、MotionPath（+Helper）
08イージングおよび物理演算：CustomEase / EasePack / CustomWiggle / CustomBounce、Physics2D / PhysicsProps、PixiPlugin の統合
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | gsap（公共 npm 包，全部插件内含） |
| package | gsap 插件子路径（ScrollToPlugin/Flip/Draggable/InertiaPlugin/SplitText/MorphSVGPlugin/Physics2DPlugin/PixiPlugin…） |
| package | PixiJS（PixiPlugin 动画的宿主渲染库，第三方） |
| network | Webflow 收购 GSAP 公告（插件免费的依据） |
| network | GSAP 插件总文档 / Flip / DrawSVG / MorphSVG / SplitText 分页 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: スクリプトの実行や外部への影響を伴わない、純粋なプロンプト指示およびルールテキスト
監査ノート： 純粋な指示型スキル：ディレクトリ内には SKILL.md（21,579バイト）のみが存在し、スクリプトの実行、外部ネットワーク通信、認証情報の読み取り、ファイルの書き出しは一切行われません。外部リンクも gsap.com の公式ページのみです。特筆すべき点として、認証情報を取り扱う手法を明確に否定しており、GreenSockの auth token を含む .npmrc の生成やプライベートレジストリの利用を本文で禁止しているため、従来のチュートリアルにありがちなサプライチェーンやトークン漏洩リスクを根本から遮断しています。留意すべき点は、生成されたコードのセルフレビューと、PixiJSなどのサードパーティ製ライブラリをユーザー側で導入する必要がある点のみです。
5二重目の独立検証
- [ok] 目录资产面：仅 SKILL.md — skills/gsap-plugins/ 下唯一文件 SKILL.md（21,579 B）；无 scripts/、references/、二进制。
- [ok] external_deps 逐条核实 — npm 安装行、插件子路径 import、PIXI.Sprite 代码、以及 6 条 gsap.com URL（blog/webflow-GSAP、Plugins 总页、Flip、DrawSVGPlugin、MorphSVGPlugin、SplitText）全部逐字命中文件。
- [ok] 「无需 auth token / 私有 registry」是否为原文反例式约束 — 原文确为否定式告诫「❌ Do **not** generate an `.npmrc` with a GreenSock auth token, suggest the private `npm.greensock.com` registry…」——全仓 token 关键词命中处即此，非读取凭证。
- [ok] SplitText 的 onSplit/autoSplit 描述与 API 语义一致性 — 原文说明 autoSplit 在字体加载完成/宽度变化时重拆、动画须建于 onSplit 内并 return 以获得清理与进度同步，与官方 v3.13+ 行为一致；同时给出 aria/mask/smartWrap 等真实参数。
- [ok] MorphSVG 参数是否编造 — shapeIndex/map/smooth(v3.14+)/curveMode/origin/precision/precompile/render/updateTarget 与官方参数表一致；convertToPath/rawPathToString/stringToRawPath 静态方法真实存在。
- [ok] 安全反例搜索 — token 扫描：除上述否定式 auth token 一处外，curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 全零命中；无混淆/编码载荷。
- [ok] 与 gsap-scrolltrigger 的插件归属是否打架 — 本文首段声明「ScrollTrigger has its own skill (gsap-scrolltrigger)」，未重复其内容；ScrollSmoother 在此、ScrollTrigger 本体在彼，分工一致。
- [ok] 元数据与 pin — frontmatter license MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
6結論
最適な用途： GSAPを用いたSVG変形（MorphSVG/DrawSVG）、テキストアニメーション（SplitText/ScrambleText）、ドラッグ＆慣性（Draggable+Inertia）、レイアウト遷移（Flip）、スムーズスクロール（ScrollSmoother）、スクロール移動（ScrollToPlugin）を扱うプロジェクトに最適です。また、エージェントが「Club会員の購入を案内してしまう」問題を防ぐリファレンスとしても適しています。
不向きな用途： 基本的な tween/timeline のみで十分なプロジェクト（gsap-core や gsap-timeline で対応可能であり、本ファイルは容量が最大です）、ScrollTrigger の詳細な解説が必要なケース（gsap-scrolltrigger を参照）、本スキルの文言を商用ライセンスの法的根拠とするケース（正確なライセンス条件は公式ページを確認してください）には適していません。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload gsap-plugins.tar.gz
sha256:
Option B · Copy Guide for Agent188abaf4c67c55db…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit aed9cfd327.