gsap-plugins
GSAP のプラグイン（Flip、Draggable、SplitText、MorphSVG、CustomEase など 20 種ほど）を、登録の仕方から正しく使わせる。全部が無料になり公開の npm から入ることも明記していて、古い「有料会員の鍵」の案内をさせない
npx skills add greensock/gsap-skills/gsap-plugins入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 71,157
- 実用度
- 57
- GitHub star
- 18,004
- 最終更新
- 2026/7/30
頼み方の例
そのままコピーして使えますgsap-pluginsスキルを使って、この見出しを 1 文字ずつ順に出す動きを SplitText で書く案を出してください。日本語は単語の間に空白が無いので、その扱いと、読み上げソフトへの配慮も含めてください。コードはまだ書き換えないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- シェルコマンドを実行する記述があります
- パッケージを導入する記述があります
- 認証情報の置き場所に触れる記述があります
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: html、javascript
いつ使うか
GSAP のプラグインを使うコードを書く・見直すときに効きます。GSAP を作っている公開元の公式の手引きです。
扱うプラグイン
- スクロールScrollToPlugin、ScrollSmoother
- 画面の部品Flip（配置の変化をつなぐ）、Draggable、Inertia、Observer
- 文字SplitText（文字・単語・行に分ける）、ScrambleText
- SVGDrawSVG、MorphSVG、MotionPath（位置合わせの調整用に MotionPathHelper）
- 緩急CustomEase、EasePack、CustomWiggle、CustomBounce
- 物理Physics2D、PhysicsProps
- その他GSDevTools（開発用）、PixiPlugin
使う前に必ず登録する
どれも使う前に gsap.registerPlugin() で登録するのが決まりです。登録せずに使うことを、禁止事項の 1 番目に挙げています。ScrollSmoother は ScrollTrigger が前提で、ScrollTrigger の後に登録し、決まった入れ子の DOM（#smooth-wrapper と #smooth-content）を用意するよう書かれています。
全部が無料、を先に言っている
本文は、GSAP が Webflow に買われてから、以前は有料会員向けだった SplitText や MorphSVG も含めて全プラグインが商用でも無料になり、公開の gsap のパッケージに入っている、と明記しています。
そのうえで、会員用の非公開の置き場や、認証の鍵を書いた .npmrc を作らせる古い案内をするな、と禁じています。エージェントが古い知識で有料の手順を案内するのを防ぐ一文です。
使わないほうがいいとき
基本の動き（to・from、時間差、緩急）だけのとき
gsap-core の範囲です。
スクロールに連動する動き
ScrollTrigger は gsap-scrolltrigger に分かれています。
注意点
解析で見つかった記述
SKILL.md の解析では、シェルコマンドの実行とパッケージの導入（npm install gsap）、認証情報の置き場所に触れる記述が見つかっています。認証情報の記述は、上の「鍵を書いた .npmrc を作るな」という禁止の文です。
同梱ファイルは無く、SKILL.md 1 枚（約 21KB）です。
日本語の SplitText は設定が要る
1 文字ずつなら type: "chars" で分けられますが、本文は文字だけで分けるのを避け、単語か行も分けるか smartWrap: true を使え、としています（単語の途中で折り返さないため）。行の折り返しが変わらないかを確かめてください。
読み上げソフトへの配慮は既定で入っている
SplitText は既定（aria: "auto"）で、元の文を aria-label に置き、分けた要素を読み上げから隠します。これを外す設定にするなら、理由を確かめてください。
開発用の道具を本番に出さない
GSDevTools は開発用で、本番に出すな、と禁止事項にあります。
インストール数
インストール数は約 4.9 万件です。同じリポジトリの 8 件は約 4.6 万〜5.4 万件に収まっていて（2026-09-07 の上流集計）、まとめて入る配布の形です。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
animate
画面の動きを 0 から作らせる。まず「動かすべきか」を使う頻度で判定し、目的を 1 語で言えなければ作らない。道具・動かす値・緩急・長さを決まった表から選び、動きを減らす設定の対応まで込みで書く
gsap-core
GSAP の基本（to・from・fromTo、緩急、時間差、既定値）で、正しい動きのコードを書かせる。動きを減らす設定と画面幅での切り替えは matchMedia で。GSAP 公式が出している手引き
gsap-scrolltrigger
GSAP の ScrollTrigger でスクロールに連動する動きを書かせる。固定表示、スクロールへの追従、横スクロールの見せかけまで。公式が出している手引き
よくある質問
部品を消すときに後始末は要りますか
要ります。SplitText のようなプラグインの実体は、部品が消えるときに元に戻せ（revert()）、とされています。gsap.context() の後始末に任せる方法も書かれています。
配置が変わる動きは何を使いますか
Flip です。今の状態を取る → DOM を変える → Flip.from() で差をつなぐ、の順が勧められています。勢いのあるドラッグなら Draggable と Inertia の組み合わせです。
文字の分け方がフォントの読み込みでずれます
フォントの読み込みを待って分けるか、autoSplit: true にして、動きを onSplit() の中で作れ、とされています。