GSAPで作るリッチなWebアニメーション入門【2026年版・コード付き】

この記事の対象: Webアニメーションを本格的に学びたいフロントエンドエンジニア
読了時間: 約8分

GSAP（GreenSock Animation Platform）は、Webアニメーションの業界標準ライブラリです。CSSアニメーションだけでは実現が難しい複雑なアニメーションを、直感的なAPIで制御できます。

この記事では、GSAPの基本的な使い方から、実務でよく使うアニメーションパターン5選までをコード付きで解説します。

GSAPとは

GSAPは、JavaScript製の高性能アニメーションライブラリです。2013年のリリース以降、数百万のサイトで使用されています。

GSAPの強み:
– パフォーマンス: requestAnimationFrameベースで60fps動作
– ブラウザ互換性: 主要ブラウザで一貫した動作
– 機能の豊富さ: タイムライン、スクロール連動、パス沿いのアニメーション等
– 学習コスト: 直感的なAPIで習得しやすい

CSSアニメーションとの使い分け:

CSSスクロールアニメーションについては「CSSスクロールアニメーション実装ガイド」をご覧ください。

GSAPの導入方法

CDN

<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>

npm

npm install gsap

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

基本の使い方

gsap.to() / gsap.from() / gsap.fromTo()

GSAPの基本3メソッドです。

// to: 現在の状態 → 指定した状態へ
gsap.to('.box', { x: 200, duration: 1 });

// from: 指定した状態 → 現在の状態へ
gsap.from('.box', { opacity: 0, y: 50, duration: 1 });

// fromTo: 開始状態 → 終了状態を明示的に指定
gsap.fromTo('.box',
  { opacity: 0, y: 50 },
  { opacity: 1, y: 0, duration: 1 }
);

イージングの種類と選び方

gsap.to('.box', {
  x: 200,
  duration: 1,
  ease: 'power2.out'  // イージング指定
});

よく使うアニメーションパターン5選

パターン1: スクロールトリガーでフェードイン

ページスクロールに連動して要素がフェードインする、最も使用頻度の高いパターンです。

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.fade-in').forEach(el => {
  gsap.from(el, {
    opacity: 0,
    y: 60,
    duration: 1,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: el,
      start: 'top 80%',  // 要素の上端がビューポートの80%位置に来たら
      once: true          // 1回だけ実行
    }
  });
});

ポイント: once: trueを設定すると、スクロールを戻してもアニメーションが再実行されません。一般的なサイトではこの設定が推奨です。

パターン2: テキストの1文字ずつ出現（SplitText）

// SplitTextプラグイン（GSAP Club会員 or 無料のSplitType代替）
import SplitType from 'split-type';

const text = new SplitType('.split-text', { types: 'chars' });

gsap.from(text.chars, {
  opacity: 0,
  y: 20,
  duration: 0.5,
  stagger: 0.03,   // 1文字ずつ0.03秒遅延
  ease: 'power2.out',
  scrollTrigger: {
    trigger: '.split-text',
    start: 'top 80%'
  }
});

ポイント: staggerプロパティで各文字のアニメーション開始を少しずつ遅らせます。0.02〜0.05秒が自然な範囲です。

パターン3: 画像のパララックス効果

gsap.utils.toArray('.parallax-img').forEach(img => {
  gsap.to(img, {
    yPercent: -20,
    ease: 'none',
    scrollTrigger: {
      trigger: img.parentElement,
      start: 'top bottom',
      end: 'bottom top',
      scrub: true  // スクロール量に連動
    }
  });
});

ポイント: scrub: trueでスクロール量とアニメーションの進行が完全に連動します。scrub: 0.5のように数値を指定すると、スクロールに遅れて滑らかに追従します。

パターン4: ページ遷移アニメーション

// ページ離脱時のアニメーション
document.querySelectorAll('a[href]').forEach(link => {
  link.addEventListener('click', e => {
    const href = link.getAttribute('href');
    if (href.startsWith('http') || href.startsWith('#')) return;

    e.preventDefault();
    gsap.to('.page-content', {
      opacity: 0,
      y: -30,
      duration: 0.4,
      onComplete: () => { window.location.href = href; }
    });
  });
});

// ページ読み込み時のアニメーション
gsap.from('.page-content', {
  opacity: 0,
  y: 30,
  duration: 0.6,
  ease: 'power2.out'
});

パターン5: タイムラインで複数要素を連動

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.hero',
    start: 'top center'
  }
});

tl.from('.hero-title', { opacity: 0, y: 40, duration: 0.8 })
  .from('.hero-subtitle', { opacity: 0, y: 30, duration: 0.6 }, '-=0.4')
  .from('.hero-cta', { opacity: 0, scale: 0.9, duration: 0.5 }, '-=0.3');

ポイント: タイムラインを使うと、複数の要素を順番に or 少しずつ重ねてアニメーションさせられます。'-=0.4'は前のアニメーション完了の0.4秒前に開始する指定です。

パフォーマンス最適化のコツ

// モバイルでアニメーションを簡略化する例
const isMobile = window.matchMedia('(max-width: 768px)').matches;

gsap.from('.element', {
  opacity: 0,
  y: isMobile ? 30 : 60,  // モバイルでは移動量を控えめに
  duration: isMobile ? 0.6 : 1
});

まとめ

GSAPアニメーションの入門ポイントをまとめます。

• 基本3メソッド: to()、from()、fromTo()
• スクロール連動: ScrollTriggerプラグインが必須
• よく使うパターン: フェードイン、テキスト出現、パララックス、ページ遷移、タイムライン
• パフォーマンス: transformとopacityを優先、モバイルは簡略化

GSAPは学習コストに対して効果が大きいライブラリです。まずはスクロールフェードインから始めて、徐々に複雑なアニメーションに挑戦してみてください。