gsap-frameworks
Vue・Nuxt・Svelte で GSAP を使うときの決まりを守らせる。部品が画面に出てから作り、消えるときに必ず片付け、セレクタを部品の中に閉じる。Nuxt ではプラグインの登録と遅延読み込みの型を示す。GSAP 公式
npx skills add greensock/gsap-skills/gsap-frameworks入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 66,093
- 実用度
- 53
- GitHub star
- 18,004
- 最終更新
- 2026/7/30
頼み方の例
そのままコピーして使えますgsap-frameworksスキルを使って、この Vue の部品（components/HeroSection.vue）の GSAP の書き方を見直してください。作るタイミング、片付け、セレクタの範囲に問題があれば、理由と直し方を出してください。コードはまだ書き換えないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: javascript、typescript
いつ使うか
Vue・Nuxt・Svelte の部品でGSAP の動きを書くときに効きます。GSAP の公開元の公式の手引きです。React は別のスキル（gsap-react）に分かれています。
原則は 3 つで、どの枠組みでも同じ
原則は 3 つで、どの枠組みでも同じです。
- 出てから作る部品が画面に載った後（Vue の
onMounted、Svelte のonMount）に作る - 消えるときに片付ける
gsap.context()の中で作り、消えるときにctx.revert()で動きとスクロールの連動をまとめて止める - 部品の中に閉じる
gsap.context()の 2 番目の引数に部品の根を渡し、.boxのような指定が部品の外に当たらないようにする
片付けを忘れると、メモリも漏れる
片付けを忘れると、消えた要素に動きが残り続け、メモリも漏れます。部品を何度も出し入れする画面ほど効いてくる決まりです。
Nuxt では
本文の対象は Nuxt 4 です。プラグインの登録を 1 か所の関数（composable）にまとめ、あまり使わないプラグインは使う所で遅延読み込みする型が示されています。本文は、Nuxt の見本のプロジェクトに、サーバーで描くときにも安全な書き方が入っている、としています。
使わないほうがいいとき
- React本文が gsap-react に回している
- 動きそのものの書き方to・from や時間差の基本は gsap-core
- スクロールの連動gsap-scrolltrigger の担当
React
本文が gsap-react に回しています。
動きそのものの書き方
to・from や時間差の基本は gsap-core、スクロールの連動は gsap-scrolltrigger です。
注意点
SKILL.md 1 枚で、外部通信などの記述は無い
SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは無く、SKILL.md 1 枚（約 11KB）です。
本文が案内する見本は、スキルと一緒には入らない
Svelte 5 の書き方は具体例が無い
例は onMount の形で、Svelte 5 については「生き死にの仕組みは違うが原則は同じ」とだけ書かれています。
データを読み込んだ後は位置を測り直す
中身が後から入って配置が変わったら ScrollTrigger.refresh() を呼べ、とされています（Vue なら nextTick の後など）。
インストール数
インストール数は約 4.6 万件です。同じリポジトリの 8 件は約 4.6 万〜5.4 万件に収まっていて（2026-09-07 の上流集計）、まとめて入る配布の形です。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
gsap-core
GSAP の基本（to・from・fromTo、緩急、時間差、既定値）で、正しい動きのコードを書かせる。動きを減らす設定と画面幅での切り替えは matchMedia で。GSAP 公式が出している手引き
gsap-plugins
GSAP のプラグイン（Flip、Draggable、SplitText、MorphSVG、CustomEase など 20 種ほど）を、登録の仕方から正しく使わせる。全部が無料になり公開の npm から入ることも明記していて、古い「有料会員の鍵」の案内をさせない
gsap-scrolltrigger
GSAP の ScrollTrigger でスクロールに連動する動きを書かせる。固定表示、スクロールへの追従、横スクロールの見せかけまで。公式が出している手引き
よくある質問
プラグインはどこで登録しますか
アプリ全体で 1 回、が勧められています。部品の中で毎回登録しても害は無いが無駄だ、と書かれています。
setup の中で動きを作ってはいけないのですか
いけない、とされています。その時点では要素がまだ無いことがあるからです。onMounted を待ちます。