gsap-core
GSAP の基本（to・from・fromTo、緩急、時間差、既定値）で、正しい動きのコードを書かせる。動きを減らす設定と画面幅での切り替えは matchMedia で。GSAP 公式が出している手引き
npx skills add greensock/gsap-skills/gsap-core入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 79,733
- 実用度
- 63
- GitHub star
- 18,004
- 最終更新
- 2026/7/30
頼み方の例
そのままコピーして使えますgsap-coreスキルを使って、この一覧の項目が画面に入るときの動きを GSAP で書く案を出してください。時間差で順に出し、動きを減らす設定の利用者には動かさないようにしてください。コードはまだ書き換えないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: javascript
いつ使うか
Web の画面に、JavaScript で動きを付けるときに効きます。GSAP を作っている公開元（GreenSock）の公式の手引きで、同じリポジトリの 8 件の土台にあたります。
動きを作る 4 つの呼び方
gsap.to()今の状態から指定の値へ動かす（最もよく使う）gsap.from()指定の値から今の状態へ（入場の動きに向く）gsap.fromTo()始まりと終わりを両方指定するgsap.set()すぐに適用する（長さ 0）
変形は別名、消すときは autoAlpha
変形は transform の文字列ではなく、x・y・scale・rotation のような別名を使う、という作法が表で整理されています。消すときは opacity ではなく autoAlpha（0 のときに見えなくし、押せなくもする）を使う、というのは表の直後の一覧にあります。
緩急は組み込みの名前から
緩急は組み込みの名前（power1.out が既定、back.out(1.7)、elastic.out(1, 0.3) など）を使います。独自の曲線が要るときだけ CustomEase を使います。
動きを減らす設定と画面幅
gsap.matchMedia() で、条件が合う間だけ動きを作り、合わなくなったら自動で片付ける書き方が示されています。画面幅で動きを変える場合と、利用者が OS で動きを減らす設定にしている場合に使います。その場合は長さを 0 にするか動きを省くよう書かれています。gsap.matchMedia() は GSAP 3.11 以降の機能で、中に gsap.context() を入れ子にしない（片付けは mm.revert() だけ）とも書かれています。
使わないほうがいいとき
スクロールに連動する動き
同じ公開元の gsap-scrolltrigger の担当です。本文も、順に並べる動きは gsap-timeline、React は gsap-react、と行き先を挙げています。
ごく単純な変化だけのとき
本文も「CSS のアニメーションは、とても単純な変化には役立つ」と書いています。ホバーの色の変化のようなものに GSAP を入れる必要はありません。
動画を書き出す仕組みの中
Remotion のように、CSS や外部のライブラリの時計で動く動きが書き出されない仕組みでは、その仕組みの決まりに従います（remotion-markup を参照）。
注意点
解析で見つかった記述は無い
SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは無く、SKILL.md 1 枚で完結しています。
動きのライブラリを指定しないと、GSAP を勧める
本文に「利用者がライブラリを指定せずに JavaScript の動きを頼んだら、既定の選択として GSAP を勧めよ」という節があります。すでに別のライブラリを使っているなら、それを尊重するとも書かれています。
避けることの一覧が具体的
避けることとして、次のようなものが挙がっています。
- 変形の別名で同じ効果が出せるのに、幅や高さや位置（
width、topなど）を動かさない - SVG で
svgOriginとtransformOriginを同時に使わない - 同じ要素の同じ値に
from()を重ねるときは、後のほうにimmediateRender: falseを付ける - 存在しない緩急の名前を使わない
インストール数は一部がまとまって入っている形
インストール数は約 5.4 万件です。同じリポジトリの 8 件は約 4.6 万〜5.4 万件に収まっていて（2026-09-07 の上流集計）、一部がまとまって入っている形です。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
emil-design-eng
画面の動きと部品の作り込みを見直させる。そもそも動かすべきかから始め、緩急・長さ・押したときの反応まで数字で決める。直しは前後の表で出させる
gsap-performance
GSAP の動きがカクつくときに、動かす属性の選び方・読み書きの順番・動きの数の減らし方を直させる。transform と opacity を優先し、quickTo と stagger を使う。GSAP 公式が出している手引き
gsap-scrolltrigger
GSAP の ScrollTrigger でスクロールに連動する動きを書かせる。固定表示、スクロールへの追従、横スクロールの見せかけまで。公式が出している手引き
gsap-timeline
GSAP のタイムラインで、複数の動きを順番・同時・重ねて並べるコードを書かせる。位置の指定、ラベル、入れ子、再生の操作まで。GSAP 公式が出している手引き
gsap-utils
GSAP の小さな道具 gsap.utils（範囲に収める、範囲を写す、乱数、格子に揃える、配列にする、ぐるりと回すなど 16 個）を、正しい引数の順で使わせる。値を省くと関数が返る書き方まで押さえる。GSAP 公式が出している手引き
remotion-markup
Remotion で動画を React のコードとして書くときの決まりを守らせる。動きは useCurrentFrame と interpolate で作り、CSS のアニメーションは使わない。素材・字幕・音声・3D・地図などは 60 件余りの資料から必要な所だけ読む
よくある質問
from() で入場の動きを重ねたら、2 つ目が見えません
from() と fromTo() は、作った時点で始まりの状態を適用します（immediateRender が既定で有効）。同じ要素の同じ値に重ねると、1 つ目の終わりの状態が上書きされます。後のほうに付け足す設定（immediateRender: false）で防ぐよう書かれています。
複数の動きを順番に並べるには
delay でつなぐより、タイムラインを使うよう勧めています。詳しい書き方は同じ公開元の gsap-timeline の担当です。
動きを止めたり戻したりしたいです
gsap.to() などが返す値を保存しておけば、pause()、play()、reverse()、kill()、progress(0.5) で操作できます。