GSAPアニメーション ギャラリー

このツールでできること

GSAPで書けるアニメーションを100種類まとめたサンプル集です。カード上で実際に動かして確認し、気に入ったものはGSAP本体のCDN読み込みまで含んだ完全版コードをワンクリックでコピーできます。貼り付けたその場で動くので、動作確認のための下ごしらえが要りません。

収録しているのは、基本のトゥイーン（to / from / fromTo）、複数の動きを繋ぐタイムライン、スクロールに連動するScrollTrigger、縦スクロールで横に流す演出、1文字ずつ立ち上がるテキスト、SVGの線が描かれる表現、マウス追従などのインタラクションです。アクセント色とサブ色は左のパネルから変更でき、カード上のデモに即座に反映されます（コピーするコードには、そのサンプルが色指定を含む場合のみ反映されます）。

使い方

1. カテゴリのチップか検索で、目当てのサンプルを絞り込む
2. カードで動きを確認する（「▶ もう一度」で最初から再生し直せます）
3. 「📋 コードをコピー」を押して、自分のHTMLに貼り付ける

ScrollTriggerのサンプルは、カードの中に独立したスクロール領域を用意しています。カード内を上下にスクロールすると、ページ全体を動かさずに挙動を確認できます。コピーされるコードの方はページ全体をスクロール対象とした通常の書き方になっているため、そのまま実際のページで使えます。

有料プラグインは使っていません

GSAPは2025年以降すべてのプラグインが無償で使えるようになりましたが、本ギャラリーではさらに導入の手間を減らすため、SplitText・DrawSVG・MorphSVG・ScrambleTextの各プラグインに相当する表現を、標準機能だけで再現しています。文字の分割は素のJavaScript、SVGの線描画は stroke-dasharray と stroke-dashoffset、図形の変形は polygon の頂点補間という具合です。読み込むのは gsap.min.js と、必要な場合のみ ScrollTrigger.min.js / Draggable.min.js だけです。

カテゴリ一覧

• 基本トゥイーン（16種） — フェード、スライド、スタガー、イージング比較、ぼかし、ランダム散開、キーフレーム
• タイムライン（12種） — 順次再生、ラベル、入れ子、再生制御、速度変更、シーク、無限マーキー
• ScrollTrigger（20種） — フェードイン、scrub、パララックス、プログレスバー、batch、snap、クラス付与、markers
• スクロール演出（16種） — 横スクロール、カードの重なり、コマ送り、突き抜けズーム、読了ハイライト、目次連動
• テキスト・数値（14種） — 1文字ずつ、タイプライター、シャッフル、グリッチ、カウントアップ、通貨表示
• SVG・図形（11種） — 線描画、チェックマーク、円グラフ、図形変形、棒グラフ、折れ線、署名、波
• インタラクション（11種） — マグネットボタン、カーソル追従、チルト、ドラッグ、画像比較、モーダル

関連ページ

設定項目やよくある質問はGSAPアニメーション ギャラリーの使い方で解説しています。JavaScriptを使わずCSSだけで完結させたい場合はCSSアニメーション ギャラリー、GSAPで動く3Dカルーセルを作りたい場合は3Dカルーセル ジェネレーターもあわせてどうぞ。