English

GSAPアニメーション ギャラリーの使い方

← ギャラリーに戻る

基本の流れ

  1. 左のカテゴリチップ、または検索でサンプルを絞り込む
  2. カード上で動きを確認する。「▶ もう一度」で最初から再生し直せる
  3. 「📋 コードをコピー」で、CDNの読み込みを含む完全版コードを取得する
  4. 自分のHTMLに貼り付け、クラス名を自分のマークアップに合わせて書き換える

画面の見方

コードプレビュー

カードのタイトル部分をクリックすると、左のパネルにそのサンプルのコードが表示されます。カードを離れても表示は残るので、複数のサンプルを見比べながら選べます。

色の設定

アクセント色とサブ色を変えると、カード上のデモに即座に反映されます。コピーされるコードにも反映されますが、コード側の <style> は構造に必要な指定だけに絞っているため、色指定を含まないサンプルでは変化しません。設定はブラウザに保存され、次回アクセス時も維持されます。「↺ 色をデフォルトに戻す」で初期値に戻せます。

ScrollTriggerのカード

「↓ この中をスクロール」と表示されているカードは、カード内部が独立したスクロール領域になっています。ページ全体を動かさずに、その場でスクロール連動の挙動を確認できます。

ScrollTriggerのstartとendの読み方

ScrollTriggerでいちばん最初につまずくのが start と end の書式です。値は空白区切りの2つで、左がトリガー要素の位置、右が画面の位置を表します。

位置が思ったとおりにならないときは、markers: true を付けると開始線と終了線が画面に描画されます。ギャラリー内の「位置をデバッグする（markers）」のカードで実際の見え方を確認できます。

よくある質問

GSAPは無料で使えますか？

はい。2025年にWebflowがGSAPを買収した際、従来Club GreenSock会員向けだった有料プラグインを含め、すべてが無償で利用できるようになりました。商用サイトでも追加費用なしで使えます。ただし配布形態によってライセンス条件は変わり得るため、最新の条件はGSAP公式サイトで確認してください。

コピーしたコードが動きません。何を確認すればいいですか？

多くはスクリプトの実行順です。GSAPのコードは対象の要素がHTMLに存在してから実行する必要があるため、<script> を閉じ </body> の直前に置くか、defer 属性を付けてください。次に多いのがセレクタの不一致で、コピー元のクラス名を自分のHTMLに合わせて書き換える必要があります。ScrollTriggerを使うサンプルでは、ScrollTrigger.min.js の読み込みと gsap.registerPlugin(ScrollTrigger) の行が両方必要です。

ScrollTriggerのサンプルが、カードの中だけでスクロールするのはなぜですか？

1画面に複数のスクロール演出を並べて見比べられるように、カードごとに独立したスクロール領域を作り、ScrollTriggerの scroller オプションでその領域を指定しているためです。コピーされるコードに scroller 指定は含まれず、ページ全体をスクロール対象とする通常の書き方になっているので、そのまま実際のページで使えます。

SplitTextやDrawSVGなどのプラグインは必要ですか？

このギャラリーでは必要ありません。文字の分割は素のJavaScriptで span に分ける方法、SVGの線描画は stroke-dasharray と stroke-dashoffset を動かす方法、図形の変形は頂点数を揃えた polygon の points 属性を補間する方法で再現しています。読み込むのは gsap.min.js と、必要な場合のみ ScrollTrigger.min.js または Draggable.min.js だけです。

ReactやNext.jsでも使えますか？

使えます。ただしDOMを直接触るため、useEffect や useLayoutEffect（Next.jsのApp Routerではクライアントコンポーネント）の中で初期化してください。アンマウント時にトゥイーンやScrollTriggerが残ると二重に動く原因になるので、gsap.context() とその戻り値の revert()、または useGSAP フックでまとめて破棄するのが安全です。

スマホでスクロール連動がガタつきます。どうすればいいですか？

スマホではアドレスバーの表示・非表示で画面の高さが変わり、start / end の位置がずれることが原因になりやすいです。100vh ではなく 100svh や dvh を使う、ScrollTriggerの invalidateOnRefresh を true にする、画像の読み込み完了後に ScrollTrigger.refresh() を呼ぶ、の3点で多くは改善します。また scrub に数値を指定すると描画の負荷が下がって滑らかになります。

アニメーションを控えめにしたいユーザーへの配慮は必要ですか？

必要です。OS側で視差効果を減らす設定をしている利用者に配慮するため、prefers-reduced-motion が reduce のときはアニメーションを止めるか、動きの少ない表現に切り替えてください。GSAPには gsap.matchMedia() があり、メディアクエリごとに異なるアニメーションを登録して自動で切り替えられます。

関連ページ

JavaScriptを使わずCSSだけで動かしたい場合はCSSアニメーション ギャラリー、リンクやナビの装飾はCSSホバーエフェクト ギャラリー、GSAPで動く3Dカルーセルは3Dカルーセル ジェネレーターにまとめています。