ふわっと表示
下から少し移動しながら、透明から表示。もっともよく使う基本の動きです。
info Web制作でよく使う動きを、GSAP 3.15.0 でカテゴリー別にまとめました。各サンプルの「コード」から HTML・CSS・JS を個別に、または「HTML一式」でまとめてコピーでき、保存してブラウザで開けばそのまま動きます。GSAPは2025年からプラグインを含めて無料（商用利用可）になっています。
animation基本の動き（Tween・Timeline）
gsap.to / from / timeline の基本形。ほかのすべてのアニメーションの土台になります。
時間差で順番に表示（stagger）
リストやカードを少しずつずらして表示。stagger の秒数を変えるだけでテンポを調整できます。
メインビジュアルの登場（timeline）
ラベル→見出し→リード文→ボタンの順に登場。timeline で順番と重なりを管理します。
スクロールを促すサイン（無限ループ）
メインビジュアル下の「SCROLL」表示。repeat: -1 で無限に繰り返し、yoyo で行き来させます。
イージング比較
代表的な ease を並べて比較。動きの印象を決めるときの見本に。
PC・スマホ・動きを減らす設定で切り替え
gsap.matchMedia で、画面幅ごとに動きを変え、OSの「視差効果を減らす」設定ではアニメーションを止めます。
swipe_verticalスクロール連動（ScrollTrigger）
スクロール位置に合わせて再生・固定・連動させる動き。プレビューは枠の中をスクロールして確認できます。
スクロールで表示
画面に入ったら表示。クラス js-fade を付けるだけで、どの要素にも使い回せます。
カード一覧を時間差で表示（batch）
同時に画面に入ったカードだけをまとめて、時間差で表示。記事一覧や実績一覧に。
パララックス（画像の視差）
枠の中で画像がゆっくり動き、奥行きが出ます。scrub でスクロール量にぴったり連動。
セクションを固定してステップ切り替え（pin）
セクションを画面に固定したまま、スクロールで中身を切り替え。サービスの流れや特徴紹介に。
横スクロールセクション
縦にスクロールすると、横に並んだパネルが流れます。実績や商品の紹介に。
読了プログレスバー
ページの上部に、どこまで読んだかを示すバー。ブログ記事や長いLPに。
数字のカウントアップ
画面に入ったら 0 から目標の数字まで増えます。実績数・満足度などの数字に。
スクロール方向でヘッダーを出し入れ
下にスクロールするとヘッダーが隠れ、上に戻すと現れます。スマホで画面を広く使えます。
画像をマスクで表示
画像が左から右へ現れ、同時に少しズームアウト。実績やギャラリーの写真に。
text_fieldsテキスト演出
見出しやキャッチコピーを1文字ずつ・1行ずつ見せる演出。SplitText などのプラグインを使います。
1文字ずつ表示
SplitText で文字を分割し、1文字ずつ下から登場。キャッチコピーや見出しに。
1行ずつせり上がる（マスク）
各行が見えない枠の下からせり上がります。リード文や本文の冒頭に。
タイピング風（文字の入れ替え）
文字が1文字ずつ打ち込まれ、消えて次の言葉へ。TextPlugin で文字列そのものを動かします。
スクランブル（ランダム文字から表示）
ランダムな文字が流れたあと、正しい文字に確定。テック系・クリエイティブ系のサイトに。マウスを乗せると再生します。
キーワードの切り替え
キャッチコピーの一部の言葉だけが、下から上へ順番に入れ替わります。
流れるテキスト・ロゴ（無限ループ）
横に途切れなく流れ続ける帯。取引先ロゴやキーワードの帯に。マウスを乗せると減速します。
ads_clickホバー・マウス操作
マウスの位置や出入りに反応する動き。プレビューの上でマウスを動かして確認できます。
マグネットボタン
マウスを近づけると、ボタンが吸い寄せられるように動きます。CTAボタンの印象づけに。
マウスカーソルの追従
小さな点と、少し遅れてついてくる円のカーソル。リンクに乗ると円が大きくなります。
3Dチルトカード
マウスの位置に合わせてカードが立体的に傾きます。実績カードやサービス紹介に。
背景がスライドするボタン
ホバーで背景色が左から広がり、矢印が少し動きます。キーボード操作（フォーカス）でも同じ動きに。
リストのホバーで画像を表示
一覧の行にマウスを乗せると、カーソルの位置に画像が浮かび上がります。実績一覧やニュース一覧に。
widgetsUIパーツ
アコーディオンやメニューなど、サイトの部品にそのまま組み込める動き。キーボード操作やaria属性も入れています。
アコーディオン（よくある質問）
高さ auto までなめらかに開閉。CSSだけでは難しい「中身の高さに合わせた開閉」が簡単に書けます。
ハンバーガーメニュー（全画面）
三本線が×に変わり、右上から円が広がってメニューが開きます。項目は時間差で登場。
モーダルウィンドウ
背景が暗くなり、パネルが下から浮かび上がるモーダル。閉じるときもアニメーションします。
タブ（下線がスライド）
選んだタブへ下線がスライドし、パネルがふわっと切り替わります。
絞り込みで並び替え（Flip）
カテゴリーで絞り込むと、残ったカードがなめらかに移動して並び直します。実績一覧の絞り込みに。
hourglass_topローディング・演出
ページを開いたときや切り替えるときの演出。
ローディング画面（0→100%）
数字とバーが100%まで進み、幕が上がってページが現れます。
ページ遷移の幕（カーテン）
縦長の帯が時間差で画面を覆い、また開きます。ページを切り替えるときの演出に。
グリッドの波紋（stagger grid）
タイルが中央から波紋のように広がります。メインビジュアルの背景や区切りの演出に。
gestureSVGアニメーション
線を描く・形を変える・パスに沿って動かす。ロゴやアイコン、図解に使えます。
線を描く（DrawSVG）
SVGの線が手書きのように描かれます。アイコン、図解、手書き風の下線などに。
スクロールで線を描く
スクロールに合わせて、ページを縦に貫く線が伸びていきます。沿革や制作の流れのページに。
形を変える（MorphSVG）
円→星→ハートと、図形がなめらかに変形します。アイコンの状態変化やロゴの演出に。
パスに沿って動かす（MotionPath）
曲線の上を、向きを変えながら進みます。紙飛行機やルート案内、図解の矢印に。
menu_book使い方
1. GSAPを読み込む
各サンプルの「読み込み」タブのタグを、</body> の直前、自分のJSより前に置きます。プラグインは使うものだけ読み込み、JSの先頭で gsap.registerPlugin() に登録します。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>npm でビルドする環境（Vite・Astro など）では、次のように読み込みます。
npm install gsap
// JS（ES Modules）
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);2. WordPressで使う
テーマの functions.php で wp_enqueue_script を使って読み込みます。第3引数の依存関係に 'gsap' を指定すると、読み込み順が保証されます。
function my_enqueue_gsap() {
$ver = '3.15.0';
$cdn = 'https://cdn.jsdelivr.net/npm/gsap@' . $ver . '/dist/';
wp_enqueue_script( 'gsap', $cdn . 'gsap.min.js', array(), $ver, true );
// 使うプラグインだけ読み込む（依存に 'gsap' を指定）
wp_enqueue_script( 'gsap-scrolltrigger', $cdn . 'ScrollTrigger.min.js', array( 'gsap' ), $ver, true );
// 自分のアニメーション用JS（テーマの /js/animation.js）
wp_enqueue_script(
'my-animation',
get_theme_file_uri( '/js/animation.js' ),
array( 'gsap', 'gsap-scrolltrigger' ),
filemtime( get_theme_file_path( '/js/animation.js' ) ),
true
);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_gsap' );3. 読み込み直後のちらつきを防ぐ
gsap.from() は、JSが動くまでのあいだ要素が一瞬見えてしまうことがあります。気になる場合は、JSが動く環境だけCSSで隠しておき、gsap.to() で表示します。
/* JSが動く環境だけ、最初は隠しておく */
.js .js-fade { visibility: hidden; }// <head> の中で、できるだけ早く
document.documentElement.classList.add('js');
// 表示するときは from ではなく to で
gsap.to('.js-fade', { autoAlpha: 1, y: 0, duration: 0.8 });4. 動きが苦手な人への配慮
OSの「視差効果を減らす」「アニメーションを減らす」設定をオンにしている人には、大きな動きを止めるのが望ましいです。「PC・スマホ・動きを減らす設定で切り替え」のように gsap.matchMedia() で (prefers-reduced-motion: reduce) を判定できます。
アニメーションを取り入れたサイト制作や、WordPressテーマへの組み込みもご相談ください。
お問い合わせ arrow_forward