本日のゴール

GSAP を使って Web アニメーションが作れるようになる！

最終的に、観光PRサイトをアニメーション付きで作ります。

もくじ

GSAP (GreenSock Animation Platform) とは

• Web 上で最も広く使われるアニメーションライブラリ
• CSS アニメーション・requestAnimationFrame のラッパーではなく、独自の高精度タイマーで動作
• 使用サイト例: Nike, Google, Microsoft, Apple...

2024年〜 すべてのプラグインが無料に！

Webflow による買収で、ScrollTrigger・SplitText・MorphSVG など
すべてのプラグインが無料で使えるようになりました。

なぜ GSAP を学ぶ？

業界標準として広く使われている！

セットアップ

CDN（最も手軽）

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

これだけで GSAP が使えるようになります！

Tween とは

Tween = 2 つの状態の間（between）を補間するアニメーションのこと

GSAP には 4 つの基本メソッド がある：

基本構文:

gsap.to(ターゲット, { プロパティ: 値, ... });

gsap.to() — 現在 → 目標値

現在の状態から目標値に向かってアニメーション

// .box を右に 300px 移動（1秒かけて）
gsap.to(".box", {
  x: 300,
  duration: 1,
});

// 複数プロパティを同時にアニメーション
gsap.to(".box", {
  x: 200,
  rotation: 360,
  scale: 1.2,
  borderRadius: "50%",
  duration: 2,
});

よく使うプロパティ

gsap.to(".box", {
  // 位置
  x: 100, // 水平移動
  y: 50, // 垂直移動

  // サイズ・回転
  scale: 1.5, // 拡大縮小
  rotation: 360, // 回転（度）

  // 見た目
  opacity: 0.5, // 透明度
  autoAlpha: 0, // opacity + visibility を同時制御
  backgroundColor: "#e74c3c",

  // 時間
  duration: 2, // 秒数
  delay: 0.5, // 遅延
});

gsap.from() — 指定値 → 現在

指定した状態から現在の状態に向かってアニメーション（逆方向）

// 左から飛んでくる演出
gsap.from(".box", {
  x: -300,
  opacity: 0,
  duration: 1,
});

よくある使い方：ページ読み込み時のフェードイン

gsap.from(".hero-title", {
  y: 50,
  opacity: 0,
  duration: 1,
  delay: 0.3,
});

from() は「初期状態を一時的に変更 → 元に戻す」イメージ

gsap.fromTo() — 開始値と終了値を両方指定

gsap.fromTo(
  ".box",
  { x: -200, opacity: 0 }, // from（開始値）
  { x: 200, opacity: 1, duration: 1 }, // to（終了値）
);

いつ使う？

• to() や from() では 現在の状態に依存 する
• fromTo() なら 開始と終了を完全にコントロール できる
• 繰り返し実行しても常に同じ結果になる

gsap.set() — 即座にセット

アニメーションなしで値をセットする（duration: 0 の to() と同等）

// 初期位置を設定
gsap.set(".box", { x: 100, opacity: 0 });

// その後アニメーション
gsap.to(".box", { x: 300, opacity: 1, duration: 1 });

使いどころ

• アニメーション前の 初期状態の設定
• 複数要素を 一括でリセット
• 条件分岐 による即時切り替え

ターゲットの指定方法

GSAP では CSS セレクタ（文字列）で動かす要素を指定します。

gsap.to(".box", { x: 100 }); // class="box" の要素を動かす
gsap.to("#hero", { opacity: 0 }); // id="hero" の要素を動かす
gsap.to("h1", { y: -20 }); // すべての <h1> を動かす

document.querySelector() と同じ書き方です

duration / delay / repeat / yoyo

// 無限ループ + 往復
gsap.to(".box", {
  x: 300,
  duration: 1,
  repeat: -1,
  yoyo: true,
  repeatDelay: 0.5,
});

イージング（Easing）

アニメーションの加速・減速カーブ を決める関数

ease: "power1.out"
       ~~~~~~~~ ~~~
       種類     方向

3 つの方向

方向	説明	イメージ
.in	ゆっくり始まる → 加速	→
.out	速く始まる → 減速	→
.inOut	ゆっくり → 速く → ゆっくり	→→

デフォルトは "power1.out"（自然な減速）

イージングの種類

Ease Visualizer で確認しよう！

Elastic / Back の調整

() の中の数値で 動きの強さ を変えられる

elastic — ゴムのような弾み

ease: "elastic.out(1, 0.3)";
//                 ↑    ↑
//          振れ幅の大きさ  振動の速さ（小さいほど速い）

ease: "elastic.out(2, 0.3)"; // 振れ幅 大
ease: "elastic.out(1, 0.8)"; // ゆっくり振動

back — 行き過ぎて戻る

ease: "back.out(1.7)";
//              ↑
//        行き過ぎる量（大きいほど大きく行き過ぎる）

ease: "back.out(3)"; // もっと行き過ぎる

Timeline とは

複数のアニメーションを順番に並べて管理 できるコンテナ

Timeline を使わない場合（delay で管理）

gsap.to(".box1", { x: 100, duration: 1 });
gsap.to(".box2", { x: 100, duration: 1, delay: 1 }); // ← 計算が必要
gsap.to(".box3", { x: 100, duration: 1, delay: 2 }); // ← 計算が必要

Timeline を使う場合

const tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { x: 100, duration: 1 }) // 自動で前のアニメの後に配置
  .to(".box3", { x: 100, duration: 1 });

Timeline なら 順番の変更・挿入・削除が簡単

Position パラメータ

Timeline で アニメーションの開始位置を細かく制御 する

const tl = gsap.timeline();
tl.to(".a", { x: 100, duration: 1 }) // デフォルト: 前の直後
  .to(".b", { x: 100, duration: 1 }, "<") // 前と同時に開始
  .to(".c", { x: 100, duration: 1 }, "<0.5") // 前の開始0.5秒後
  .to(".d", { x: 100, duration: 1 }, "-=0.5") // 前の終了0.5秒前
  .to(".e", { x: 100, duration: 1 }, "+=1"); // 前の終了1秒後

ラベル（Labels）

タイムライン上に名前付きのマーカー を設定できる

const tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 1 })
  .addLabel("middle") // ← ラベルを追加
  .to(".box2", { y: 100, duration: 1 })
  .to(".box3", { x: 100, duration: 1 }, "middle") // ← ラベル位置に配置
  .to(".box4", { y: 100, duration: 1 }, "middle+=0.5"); // ← ラベル + 0.5秒

ラベルの便利な使い方

// ラベル位置へジャンプ
tl.play("middle");

// ラベル位置から逆再生
tl.reverse("middle");

Timeline のデフォルト設定 & ループ

defaults で共通プロパティをまとめる

const tl = gsap.timeline({
  defaults: { duration: 0.5, ease: "power2.out" },
});

tl.to(".a", { x: 100 }) // duration, ease を省略できる
  .to(".b", { y: 100 })
  .to(".c", { x: 200 });

ループアニメーション

const tl = gsap.timeline({
  repeat: -1, // 無限ループ
  yoyo: true, // 往復
  repeatDelay: 0.5,
});

tl.to(".dot", { y: -20, stagger: 0.1 });

ローディングアニメーションに最適！

Stagger とは

複数要素のアニメーション開始を時間差で並べる 機能

gsap.to(".box", {
  x: 300,
  duration: 1,
  stagger: 1, // 各要素 1 秒間隔
});

each vs amount

Stagger の from（開始位置）

stagger: { each: 0.1, from: "start" }   // 先頭から（デフォルト）
stagger: { each: 0.1, from: "end" }     // 末尾から
stagger: { each: 0.1, from: "center" }  // 中央から外へ
stagger: { each: 0.1, from: "edges" }   // 両端から中央へ
stagger: { each: 0.1, from: "random" }  // ランダム

Stagger の repeat / yoyo（波のドット）

各要素が 独立して 繰り返し / 往復する

gsap.to(".dot", {
  y: -30,
  duration: 0.5,
  stagger: {
    each: 0.15,
    repeat: -1, // 各要素が独立して無限ループ
    yoyo: true, // 各要素が独立して往復
  },
});

これで「波のように動くドット」が簡単に作れる

コールバック

アニメーションのイベントに応じて関数を実行 できる

gsap.to(".box", {
  x: 300,
  duration: 2,
  onStart: () => console.log("開始！"),
  onUpdate: () => console.log("更新中..."),
  onComplete: () => console.log("完了！"),
});

Timeline にも使えます（例: ローディング完了後にメイン表示）

制御メソッド

Tween や Timeline の 再生を自在にコントロール する

const tween = gsap.to(".box", { x: 300, duration: 2, paused: true });

tween.play(); // 再生
tween.pause(); // 一時停止
tween.reverse(); // 逆再生
tween.restart(); // 最初から再生
tween.seek(1); // 1秒地点にジャンプ
tween.progress(0.5); // 50% 地点にジャンプ
tween.timeScale(2); // 2倍速
tween.kill(); // 破棄

ScrollTrigger とは

スクロール位置に応じてアニメーションを発火・制御 するプラグイン

セットアップ

<!-- GSAP本体 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<!-- ScrollTrigger プラグイン -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

<script>
  // プラグインを登録（重要！）
  gsap.registerPlugin(ScrollTrigger);
</script>

基本的な使い方

gsap.from(".box", {
  opacity: 0,
  y: 50,
  scrollTrigger: {
    trigger: ".box", // トリガー要素
    start: "top 80%", // 開始位置
    markers: true, // デバッグ用
  },
});

start / end の指定

start: 'トリガー要素の位置  画面上の位置'

例:
start: 'top 80%'       → 要素の上端が画面の80%位置に来たら
start: 'top center'    → 要素の上端が画面中央に来たら
start: 'center center' → 要素の中央が画面中央に来たら

toggleActions — スクロール方向で動作を変える

scrollTrigger: {
  trigger: '.box',
  start: 'top 80%',
  end: 'bottom 20%',
  toggleActions: 'play none none reverse'
  //                             
  //      onEnter  onLeave  onEnterBack  onLeaveBack
}

よく使うパターン: "play none none reverse"（画面外に出たら元に戻る）

markers でデバッグ

markers

scrollTrigger: {
  trigger: '.box',
  start: 'top 80%',
  markers: true    // 緑（start）と赤（end）のラインが表示
}

本番では必ず false にするか削除すること

scrub — スクロール量に連動

gsap.to(".box", {
  x: 500,
  rotation: 360,
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true, // スクロールに完全連動
  },
});

pin — 要素を固定する

gsap.to(".box", {
  rotation: 360,
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "+=200%", // スクロール量（画面2個分）
    pin: true, // セクションを固定！
    scrub: true,
  },
});

• pin: true でトリガー要素を画面に固定
• スクロールしても要素は動かず、アニメーションだけ進む
• 横スクロールや複雑な演出の基盤になる重要な機能

横スクロール（pin + scrub の応用）

const panels = document.querySelector(".panels");
const scrollAmount = panels.scrollWidth - window.innerWidth;

gsap.to(".panels", {
  x: () => -scrollAmount, // 関数形式で値を返す
  ease: "none",
  scrollTrigger: {
    trigger: ".panels-wrapper",
    start: "top top",
    end: () => "+=" + scrollAmount,
    pin: true, // 固定して
    scrub: 1, // スクロールに追従
    invalidateOnRefresh: true, // リサイズ時に再計算
  },
});

Timeline + ScrollTrigger

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: 1,
    markers: true,
  },
});

tl.from(".title", { y: 30, opacity: 0 })
  .from(".text", { y: 20, opacity: 0 }, "-=0.4")
  .from(".box", { scale: 0, stagger: 0.15 }, "-=0.2");

• Timeline のオプションに scrollTrigger を追加するだけ！
• スクロールで発火し、中のアニメーションが順番に実行される

作るもの

自分の出身地（都道府県・市区町村）のPRサイト

StackBlitz のテンプレートをベースに、
あなたの地元をPRするサイトを作ってみよう！

StackBlitz を開く

examples/05-fukui-pr/index.html

サンプルサイトの構成

福井県PRサイトで使われている GSAP の技術：

カスタマイズの手順

Step 1: テーマを決める

• どの地域をPRする？（都道府県 or 市区町村）
• どんな魅力を伝えたい？

Step 2: 必要な情報を集める

• 観光スポット（3つ程度）
• 名物・グルメ
• アクセス情報
• 画像（Unsplash などで探す）

カスタマイズのポイント

配色の変更（CSS カスタムプロパティ）

:root {
  --color-primary: #1a5f4a; /* メインカラー */
  --color-secondary: #d4a373; /* サブカラー */
}

テキストの変更

<h1 class="hero-title">
  <span class="hero-title-line">FUKUI</span>
  <!-- ↑ 地域名 -->
</h1>

画像の変更

<img src="https://images.unsplash.com/photo-xxxx?w=1200&h=800&fit=crop" alt="..." />

「Unsplash+」マークの無い画像を選びましょう

やってみよう

必須: コンテンツを自分の地元に

1. 地域名・テキスト・画像を変更
2. 配色を変更（CSS カスタムプロパティで最低3色）

選択: 好きなアニメーションをカスタマイズ

（2つ以上やってみよう）

• ease: ヒーローの登場を back.out や elastic.out に変えてみる
• stagger: ローディング文字の間隔や from を変える
• Timeline: ヒーローの "-=0.6" を変えてタイミングを調整
• scrub: 横スクロールの追従速度を 0.5 → 2 に変える
• パララックス: 観光スポットの y 移動量を変える

チャレンジ

• オリジナルのセクション追加 + アニメーション

作業時間

約40分

• 10分：テーマ決め＆情報収集
• 20分：コードの編集
• 10分：グループ内で発表

困ったらスタッフに聞いてね！

発表タイム

作ったサイトをみんなに見せよう！

• どの地域を選んだ？
• こだわりポイントは？
• 使った GSAP の技術は？

今日学んだこと

GSAP の基本

• gsap.to / gsap.from / gsap.fromTo / gsap.set
• プロパティ（x, y, scale, rotation, opacity...）
• イージング（ease）

Timeline & Stagger

• 複数アニメーションの制御 / タイミングの調整（<, +=, -=）
• ループアニメーション（repeat, yoyo）
• Stagger（時間差アニメーション）

コールバック & ScrollTrigger

• onStart / onComplete / onUpdate
• スクロール連動（scrub）/ ピン留め（pin）/ 横スクロール
• Timeline + ScrollTrigger の組み合わせ

パフォーマンスのコツ

推奨: Transform プロパティを使う

// GPU アクセラレーションが効く（高速）
gsap.to(".box", { x: 100, y: 50, scale: 1.5, rotation: 45 });
// autoAlpha で opacity + visibility を同時制御
gsap.to(".box", { autoAlpha: 0 });

避ける: レイアウトを変更するプロパティ

// リフロー（再計算）が発生する（低速）
gsap.to(".box", { width: "200px", top: "100px" });

不要な Tween は kill()

ScrollTrigger.getAll().forEach((st) => st.kill());
gsap.killTweensOf(".box");

gsap.utils & gsap.matchMedia

ユーティリティメソッド

gsap.utils.random(0, 500); // ランダムな値
gsap.utils.random(["red", "blue"]); // 配列からランダム選択
gsap.utils.toArray(".box"); // NodeList を配列に変換
gsap.utils.clamp(0, 100, 150); // → 100（範囲制限）

レスポンシブ対応

const mm = gsap.matchMedia();

mm.add("(min-width: 768px)", () => {
  // デスクトップ用アニメーション
  gsap.to(".sidebar", { x: 0, duration: 0.5 });
});

mm.add("(max-width: 767px)", () => {
  // モバイル用アニメーション
  gsap.to(".sidebar", { y: 0, duration: 0.5 });
});

GSAP 学習ロードマップ

さらに学びたい人へ

• GSAP 公式ドキュメント
• Ease Visualizer
• GSAP Cheat Sheet
• ScrollTrigger デモ
• CodePen で作例を見る

実際に作って試すのが一番！

よくあるパターン集

ページロードアニメーション

const tl = gsap.timeline();
tl.from("nav", { y: -100, duration: 0.5 })
  .from(".hero h1", { opacity: 0, y: 50 }, "-=0.2")
  .from(".hero .cta", { opacity: 0, scale: 0.8 }, "-=0.2");

テキストカウンター

const counter = { value: 0 };
gsap.to(counter, {
  value: 12345,
  duration: 2,
  onUpdate: () => {
    el.textContent = Math.round(counter.value).toLocaleString();
  },
});

CodePen | examples/patterns/page-load.html ・ CodePen | examples/patterns/hover-card.html ・ CodePen | examples/patterns/text-counter.html

事例1

• プロジェクト名: ふわっち
• URL: https://whowatch.tv/s/snack/
• 使用技術: GSAP, ScrollTrigger

事例2

• プロジェクト名: VTuber登竜門
• URL: https://www.vmon.jp/
• 使用技術: GSAP, ScrollTrigger