GSAPアニメーション ギャラリーとは、GSAPで書ける動きをブラウザ上のカードで再生して確かめ、CDNの読み込みを含む完全版コードをワンクリックでコピーできる無料ツールです。基本のトゥイーンからタイムライン、スクロールに連動するScrollTriggerまでを同じ画面に並べてあり、会員登録もインストールも要りません。
「スクロールで要素をふわっと出したい」「複数の動きを順番に繋ぎたい」——GSAPは公式ドキュメントが充実している一方で、やりたい表現の名前が分からないと検索そのものができないという入口の壁があります。しかもGSAPのコードは貼っただけでは動かず、ライブラリの読み込み・スクリプトの実行順・セレクタの一致という3点が揃って初めて画面が動きます。動くかどうか分からないコードの下ごしらえに時間を取られるのは、試作段階ではかなりの負担です。
この記事では、CodeQuest.workが公開している無料ツール「GSAPアニメーション ギャラリー」の使い方を、実際の操作の流れに沿って解説します。あわせて、どこまでCSSアニメーションで足りて、どこからGSAPを持ち出すべきかという判断基準と、コピーしたコードが動かないときの確認手順もまとめました。
GSAPアニメーション ギャラリーとは
GSAPアニメーション ギャラリーは、ブラウザだけで完結するGSAPの試用＆コード取得ツールです。基本の流れは「動きを見る → 選ぶ → コピペ」の3ステップだけで、カードの上でその場に動きが再生されます。気に入ったものは「コードをコピー」を押すだけで、GSAP本体のCDN読み込みまで含んだ状態のコードが手に入ります。
このツールの要点は、貼り付けたその場で動く状態でコードが渡されることです。GSAPのサンプルは、解説記事やCodePenから持ってくると「ライブラリの読み込みが省略されている」「ScrollTriggerの登録行だけ抜けている」といった欠けが起きがちで、動かない原因の切り分けに時間を取られます。ギャラリーが出力するコードは読み込みと登録を含んだ形なので、まず動く状態から自分のマークアップに寄せていく進め方ができます。
なお、収録されているのはJavaScript（GSAP）で動かす表現です。ホバーや表示直後の演出だけで足りる場合は、姉妹ツールを解説したCSSアニメーションをコピペで使える無料ツールのほうが目的に合います。手法そのものを比較検討している段階なら、Webアニメーション完全ガイド｜Animate.css・AOS・IO・GSAP 4手法を比較解説から読むと選択肢の地図が先に手に入ります。
このツールでできること
機能はシンプルに絞られています。登録やインストールは不要で、ページを開いた時点からすべての機能が使えます。
- カード上で動きを再生して確認できる（「もう一度」で最初から再生し直せる）
- CDNの読み込みを含む完全版コードをワンクリックでコピーできる
- カテゴリのチップと検索で目当ての表現を絞り込める
- アクセント色とサブ色を変更でき、カード上のデモに即座に反映される
- カードのタイトルをクリックすると、左のパネルにそのサンプルのコードが表示される
- スクロール連動のサンプルは、カードの中だけをスクロールして挙動を確認できる
色の設定はブラウザに保存されるため、次に開いたときも自分のサイトに寄せた配色のまま比較できます。ただしコピーされるコードに色が反映されるのは、そのサンプルが色指定を含む場合だけです。出力されるコードは構造に必要な指定だけに絞られているため、装飾は自分のCSSに任せる前提の設計になっています。
使い方は3ステップ
操作は絞り込み・確認・コピーの3つです。順番に見ていきます。
- カテゴリのチップか検索で、目当てのサンプルを絞り込む
- カードで動きを確認する（気になるものはタイトルをクリックしてコードを左パネルに表示）
- 「コードをコピー」を押して、自分のHTMLに貼り付ける
貼り付けたあとに必要になるのは、クラス名を自分のマークアップに合わせて書き換える作業だけです。サンプルはデモ用のクラス名で書かれているため、そのままでは自分のHTMLの要素にヒットしません。逆に言えば、動かないときに真っ先に疑うべきもここになります。
各項目の細かい設定や、画面の見方の詳細は、ツール側の使い方・FAQページにまとめてあります。
収録カテゴリの見取り図
サンプルは7つのカテゴリに分かれています。GSAPで何ができるのかを掴む地図としても使えるので、最初は各カテゴリを1つずつ再生してみるのがおすすめです。
| カテゴリ | 主な内容 | 向いている場面 |
|---|---|---|
| 基本トゥイーン | フェード、スライド、スタガー、イージング比較、ぼかし、キーフレーム | 1要素の登場・退場を整えたい |
| タイムライン | 順次再生、ラベル、入れ子、再生制御、速度変更、シーク、無限マーキー | 複数の動きを順番に繋ぎたい |
| ScrollTrigger | フェードイン、scrub、パララックス、プログレスバー、batch、snap | スクロール位置に動きを紐づけたい |
| スクロール演出 | 横スクロール、カードの重なり、コマ送り、読了ハイライト、目次連動 | 1画面を使い切る見せ場を作りたい |
| テキスト・数値 | 1文字ずつ、タイプライター、シャッフル、グリッチ、カウントアップ | 見出しや数字を主役にしたい |
| SVG・図形 | 線描画、チェックマーク、円グラフ、図形変形、棒グラフ、署名 | ロゴやグラフを描き出したい |
| インタラクション | マグネットボタン、カーソル追従、チルト、ドラッグ、画像比較 | 操作への反応を作りたい |
この並びは、そのままGSAPの学習順としても素直です。基本トゥイーンで to と from の違いを掴み、タイムラインで順番の制御を覚え、そのうえでScrollTriggerに進むと、スクロール連動が「タイムラインの再生位置をスクロール量に結びつけたもの」だと理解できます。
CSSアニメーションとGSAPの使い分け
GSAPは強力ですが、すべての動きをGSAPで書く必要はありません。判断の分かれ目は「動きのきっかけ」と「途中で操作するかどうか」の2点です。まずは両者の性格を並べて比べます。
| 判断軸 | CSSアニメーションで足りる | GSAPを使う |
|---|---|---|
| 動きのきっかけ | ホバー、クラス付与、表示直後 | スクロール位置、ドラッグ、任意のタイミング |
| 動きの数 | 1〜2個の単発 | 複数を順番に繋ぐ、途中で重ねる |
| 途中の操作 | 基本は最後まで再生する | 再生・停止・逆再生・任意位置へのシークができる |
| 値の指定 | 開始と終了を書く | 現在値からの相対指定（"+=100" など）が書ける |
| 読み込むもの | 追加なし | gsap.min.js（必要に応じてプラグイン） |
CSSで足りる場面
ボタンのホバー、メニューの開閉、ローディングのスピナー、要素がふわっと出るだけの登場演出——このあたりはCSSの transition と @keyframes で完結します。ライブラリを読み込まない分だけページは軽く、JavaScriptが失敗しても表示が壊れません。書き方に不安がある場合はCSSアニメーション徹底解説｜@keyframes の基本から応用までで基礎を固めてから戻ってくると、GSAPで書く部分の判断も速くなります。
GSAPを選ぶ場面
反対に、CSSだけで書こうとすると急に苦しくなるのが次のような要件です。いずれも「時間」を自分で操作したいという点で共通しています。
- スクロール量に合わせて動きの進み具合を変えたい（ScrollTriggerの
scrub） - 3つ以上の動きを、少しずつ重ねながら順番に流したい
- 途中で止める、逆再生する、特定の位置に飛ばす、といった制御を入れたい
- 多数の要素に少しずつ時間差をつけたい（スタガー）
- SVGの線を描き出す、数値をカウントアップするなど、CSSでは値を扱いにくい対象を動かしたい
迷ったときの判断順
実務では、上から順に当てはめていくと迷いません。4つとも「いいえ」ならCSSで書くのが最短です。
- スクロール位置と動きを結びつけるか（はい → GSAP＋ScrollTrigger）
- 複数の動きの順番や重なりを調整するか（はい → GSAPのタイムライン）
- 途中で止める・戻す・飛ばす操作が要るか（はい → GSAP）
- 動かす対象がSVGの描画や数値そのものか（はい → GSAP）
なお「スクロールで一度だけふわっと出す」だけなら、IntersectionObserver でクラスを付けてCSSで動かす方法も有効です。GSAPが効いてくるのは、そこから先のスクロール量に応じて途中経過が変わる表現に踏み込んだときです。判断に迷ったら、ギャラリーで両方の動きを再生して見比べるのが手っ取り早い方法になります。
ScrollTriggerで最初につまずくstartとend
ScrollTriggerで最初の関門になるのが start と end の書式です。値は空白で区切られた2つの語からできていて、左がトリガー要素の位置、右が画面（ビューポート）の位置を表します。この読み方さえ分かれば、あとは組み合わせるだけです。
| 書き方 | 意味 | よく使う場面 |
|---|---|---|
"top 88%" | 要素の上端が、画面の上から88%の位置に来たとき | スクロールして少し見えたら再生する |
"top top" | 要素の上端が画面の上端に来たとき | 固定して見せる演出の開始点 |
"bottom bottom" | 要素の下端が画面の下端に来たとき | 要素を見終わる位置で終了させる |
"center center" | 要素の中央が画面の中央に来たとき | 画面中央を基準に動かす |
コードにすると次のような形になります。scrub: true を入れると、動きの進み具合がスクロール量に追従します（数値を入れると、その秒数だけ遅れて滑らかに追いつきます）。
gsap.registerPlugin(ScrollTrigger);
gsap.to(".panel", {
x: -600,
ease: "none",
scrollTrigger: {
trigger: ".section",
start: "top top", // 要素の上端が画面の上端に来たら開始
end: "bottom bottom", // 要素の下端が画面の下端に来たら終了
scrub: 1, // スクロールに追従（1秒かけて追いつく）
markers: true // 開始線・終了線を画面に表示（確認用）
}
});位置が思ったとおりにならないときは、markers: true を付けて開始線と終了線を目で見るのが最短です。ギャラリーにも同じ確認ができるサンプルが入っているので、自分のコードに入れる前に見え方を掴んでおけます。公開時には外し忘れに注意してください。細かい指定はGSAP公式のScrollTriggerドキュメントが最新の一次情報です。
スクロール連動の実装をひととおり自分で組み立ててみたい場合は、GSAPとScrollTriggerで実現するスクロール連動リバースアニメーションで、模写課題として一連の流れを追えます。
2025年にGSAPは全プラグインが無料になった
GSAPを検索すると「SplitTextは有料」「Club GreenSockの会員登録が必要」といった情報が今も出てきますが、これは古い前提です。GSAP 3.13（2025年4月29日公開）で、Webflowの支援により、従来は会員限定だったプラグインを含めてすべてが無償化されました（GSAP公式のリリース告知）。公式サイトも「GSAP is now 100% free for all users」と明記しています（GSAP公式の価格ページ）。商用サイトでも追加費用はかかりません。
そのうえで、このギャラリーはプラグインを使わずに同等の表現を標準機能だけで再現しています。無料化されたとはいえ、読み込むファイルが増えれば設定も増えるためです。実際の置き換えは次のとおりです。
| 本来のプラグイン | ギャラリーでの再現方法 |
|---|---|
| SplitText（文字の分割） | 素のJavaScriptで1文字ずつ span に分ける |
| DrawSVG（SVGの線描画） | stroke-dasharray と stroke-dashoffset を動かす |
| MorphSVG（図形の変形） | 頂点数を揃えた polygon の points を補間する |
| ScrambleText（文字のシャッフル） | 文字列を差し替えながら再描画する |
結果として、読み込むのは gsap.min.js と、必要な場合のみ ScrollTrigger.min.js または Draggable.min.js だけになります。コピーしたコードの依存関係が最小限で済むのは、既存サイトに後から差し込むときほど効いてきます。
コピーしたコードをサイトに組み込む
コピーしたコードはそのまま貼れば動きますが、既存サイトに組み込むときはスクリプトの実行順だけ気をつけてください。GSAPのコードは、動かす対象の要素がHTMLに存在してから実行される必要があります。骨組みは次の形です。
<!-- 動かす対象のマークアップ -->
<div class="box"></div>
<!-- ライブラリ → 自分のコード の順に、</body> の直前で読み込む -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.from(".box", { y: 40, opacity: 0, duration: 0.8 });
</script>ポイントは3つです。ライブラリを自分のコードより先に読み込むこと、</body> の直前に置くか defer を付けること、そしてScrollTriggerを使うサンプルでは読み込みと gsap.registerPlugin(ScrollTrigger) の両方が要ることです。この3点が揃っていないと、コンソールにエラーが出ないまま何も動かない状態になりがちです。
ReactやNext.jsに組み込む場合は、DOMを直接触るため useEffect や useLayoutEffect（App Routerではクライアントコンポーネント）の中で初期化します。アンマウント時にトゥイーンやScrollTriggerが残ると二重に動く原因になるので、後片付けまでセットで書くのが安全です。
useEffect(() => {
const ctx = gsap.context(() => {
gsap.from(".box", { y: 40, opacity: 0, duration: 0.8 });
}, containerRef);
return () => ctx.revert(); // アンマウント時にまとめて破棄
}, []);GSAP公式が配布している useGSAP フックを使うと、この破棄処理を自前で書かずに済みます（GSAP公式のReactガイド）。なおGSAPはjQueryに依存しません。古い解説記事でjQueryと併記されているのは当時の慣習で、単体で問題なく動きます。
こんな場面で使える
制作の現場では、次のような場面でそのまま役に立ちます。
- クライアントに動きの方向性を提案する（言葉で説明する代わりに、実際に動く画面を並べて選んでもらう）
- LPの見せ場を決める（横スクロールやカードの重なりなど、1画面を使い切る演出を先に試す）
- GSAPの書き方を思い出す（タイムラインの繋ぎ方やイージングの名前を、動く例から逆引きする）
- 実装前の当たりをつける（似た表現を再生してみて、工数の見当を早い段階で立てる）
カルーセルのように「動き」そのものが機能になるUIを作りたい場合は、専用ツールのほうが早く形になります。GSAPで回るカルーセルなら3Dカルーセルをコピペで作る無料ツール、装飾系のジェネレーターをまとめて見たい場合はCSSの装飾・アニメーションを作る無料ジェネレーターまとめが入口になります。
使うときにつまずきやすいポイント
コピペ自体は一瞬ですが、自分のサイトに載せた段階で引っかかりやすい箇所があります。先に知っておくと切り分けが速くなります。
セレクタが自分のHTMLと一致していない
動かないときの原因として最も多い箇所です。サンプルはデモ用のクラス名で書かれているため、貼り付けたあとに自分のマークアップへ合わせる必要があります。GSAPは対象が見つからなくてもエラーを投げずに静かに終わるため、「エラーは出ていないのに動かない」ときはまずセレクタを疑うのが定石です。
スマホでスクロール連動の位置がずれる
スマホではアドレスバーの表示・非表示で画面の高さが変わるため、start と end の位置がずれます。100vh ではなく 100svh や dvh を使う、invalidateOnRefresh を有効にする、画像の読み込み完了後に ScrollTrigger.refresh() を呼ぶ——この3点で多くは収まります。動きがガタつく場合は scrub に数値を指定すると滑らかになります。
動きを減らしたいユーザーへの配慮
OS側で視差効果を減らす設定をしている利用者がいます。この意思は prefers-reduced-motion メディア特性で受け取れる（MDN）ので、reduce のときは動きを止めるか、控えめな表現に切り替えてください。GSAPには gsap.matchMedia() があり、メディアクエリごとに別のアニメーションを登録して自動で切り替えられます。
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(".box", { y: 40, opacity: 0, duration: 0.8 });
});
mm.add("(prefers-reduced-motion: reduce)", () => {
gsap.set(".box", { y: 0, opacity: 1 }); // 動かさず最終状態にする
});演出を盛りすぎて読み進めにくくなる
スクロール連動は、入れると一気にサイトの印象が変わる反面、全セクションに掛けると「読みたいのに読ませてもらえない」ページになります。特に scrub で固定して見せる演出は、その区間だけスクロール量を消費するため、情報を探しに来た読者には遠回りに感じられます。見せ場を1〜2か所に絞り、残りは軽いフェードで揃えるくらいが、実務では収まりが良い配分です。
よくある質問
Q. 商用サイトでも無料で使えますか？
はい。ツールの利用もコードの使用も無料で、会員登録は不要です。GSAP本体も2025年のバージョン3.13以降はすべてのプラグインを含めて無償で利用でき、商用サイトでも追加費用はかかりません。ただし配布形態によってライセンス条件は変わり得るため、最新の条件はGSAP公式サイトで確認してください。
Q. CSSアニメーションとGSAP、どちらを先に覚えるべきですか？
CSSが先です。ホバーや登場演出の大半はCSSで完結し、GSAPを使う場面でも transform や opacity の理解がそのまま土台になります。CSSで書きづらいと感じた要件（スクロール量への追従、複数の動きの順序制御、途中での停止や逆再生）が出てきた時点でGSAPに進むと、遠回りになりません。
Q. コピーしたコードが動きません。何を確認すればいいですか？
確認は3点です。第一にスクリプトの実行順で、GSAPのコードは対象の要素が存在してから実行する必要があるため </body> の直前に置くか defer を付けます。第二にセレクタで、コピー元のクラス名を自分のHTMLに合わせて書き換えます。第三にScrollTriggerを使うサンプルの場合で、プラグインの読み込みと gsap.registerPlugin(ScrollTrigger) の行が両方必要です。
Q. スクロール連動のサンプルがカードの中だけで動くのはなぜですか？
複数のスクロール演出を1画面で見比べられるように、カードごとに独立したスクロール領域を作り、ScrollTriggerの scroller オプションでその領域を対象にしているためです。コピーされるコードには scroller の指定は含まれず、ページ全体をスクロール対象にする通常の書き方になっているので、そのまま実際のページで使えます。
Q. jQueryは必要ですか？
必要ありません。GSAPは単体で動作し、jQueryに依存しません。古い解説記事でjQueryと一緒に紹介されているのは当時の慣習によるもので、現在は gsap.min.js だけで書けます。ReactやNext.jsで使う場合も、jQueryを追加する必要はありません。
Q. 個別の実装解説記事とはどう使い分けますか？
ギャラリーは表現を並べて比較し、選んでコピペするためのツールです。特定の1つについて、どういう考え方で組み立てられているかを順に理解したい場合は、個別の実装解説記事のほうが向いています。方向性を決めるのがギャラリー、作り込むのが個別記事という使い分けです。
まとめ
GSAPアニメーション ギャラリーは、基本のトゥイーンからタイムライン、ScrollTriggerによるスクロール連動までをカード上で再生して選び、CDNの読み込みを含むコードをそのままコピーできる無料ツールです。プラグインを使わない構成なので、既存サイトに差し込むときの依存関係も最小限で済みます。
大切なのは、すべてをGSAPで書かないことです。ホバーや登場演出はCSSに任せ、スクロール量への追従・複数の動きの順序制御・途中での停止や逆再生が必要になった場面でGSAPを持ち出す。この線引きさえ決めておけば、ページは軽いまま見せ場だけを作れます。カードを再生しながら、自分のサイトのどこに1つ入れるかを探してみてください。GSAPで組んだカードUIの実装まで踏み込みたい場合は、GSAPカードアニメーション実装ガイドが次の一歩になります。