gsap-react
React と Next.js で GSAP を使うときの決まりを守らせる。useGSAP のフックで作り、片付けを自動にし、セレクタを部品の中に閉じ、後から作る動きは contextSafe で包む。GSAP 公式
npx skills add greensock/gsap-skills/gsap-react入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 70,232
- 実用度
- 44
- GitHub star
- 18,004
- 最終更新
- 2026/7/30
頼み方の例
そのままコピーして使えますgsap-reactスキルを使って、この React の部品（components/Hero.tsx）の GSAP の書き方を見直してください。useEffect で書いている所を useGSAP に直す案と、クリックで作る動きの片付けの問題を出してください。コードはまだ書き換えないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- シェルコマンドを実行する記述があります
- パッケージを導入する記述があります
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: bash、javascript
いつ使うか
React や Next.js の部品でGSAP の動きを書くときに効きます。GSAP の公開元の公式の手引きです。
守らせる決まりは 4 つ
- useGSAP を使う
useEffectの代わりに@gsap/reactのuseGSAP()。部品が消えるときの片付け（動きとスクロールの連動を戻す）が自動 - 範囲を渡す
scopeに部品の根の ref を渡し、.boxのような指定を部品の中に閉じる - 後から作る動きを包むクリックなど、フックの後で作る動きは
contextSafeで包む。包まないと片付けの対象から漏れる - 依存で作り直す
dependenciesを渡すと値が変わったとき再実行。revertOnUpdateで毎回片付けてから作り直す
useGSAP を使えないときの書き方
useGSAP を使えないときは、useEffect の中で gsap.context() を使い、必ず ctx.revert() を返す形でもよい、とされています。
使わないほうがいいとき
Vue・Nuxt・Svelte
同じ公開元の gsap-frameworks です。
動きそのものの書き方
to・from や時間差は gsap-core、スクロールの連動は gsap-scrolltrigger です。
注意点
解析で見つかった記述
SKILL.md の解析では、シェルコマンドの実行とパッケージの導入（npm install gsap、@gsap/react）の記述が見つかっています。同梱ファイルは無く、SKILL.md 1 枚（約 7KB）です。
フックも登録が要ります
既定では 1 回だけ動きます
useGSAP は既定で空の依存配列を渡すので、描き直しのたびには動きません。値の変化に合わせたいなら dependencies を渡します。
サーバーで描く環境に注意が要ります
本文は Next.js などでの SSR の問題にも触れていて、サーバーで描く間に gsap や ScrollTrigger を呼ぶな、としています。GSAP のコードは useGSAP（か useEffect）の中に置き、ブラウザでだけ動かす作りが前提です。
インストール数
インストール数は約 4.8 万件です。同じリポジトリの 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-frameworks
Vue・Nuxt・Svelte で GSAP を使うときの決まりを守らせる。部品が画面に出てから作り、消えるときに必ず片付け、セレクタを部品の中に閉じる。Nuxt ではプラグインの登録と遅延読み込みの型を示す。GSAP 公式
gsap-scrolltrigger
GSAP の ScrollTrigger でスクロールに連動する動きを書かせる。固定表示、スクロールへの追従、横スクロールの見せかけまで。公式が出している手引き
よくある質問
セレクタではなく ref で指定すべきですか
本文は ref を勧めています。描き直しのたびに違う要素に当たる恐れがあるからです。セレクタを使うなら scope を必ず渡します。
動き終わりの処理で React の警告が出ます
onComplete などのコールバックを contextSafe で包むと、部品が消えた後は何もしなくなり、警告を避けられる、とされています。