gsap

GSAP (GreenSock) — Web アニメーションスキル

使用する場面

• 高品質な UI／モーションデザイン：登場アニメーション、マイクロインタラクション、ページ遷移
• タイムラインベースのシーケンス（個別に散在する CSS トランジションではなく）
• スクロール連動のストーリーテリング（ScrollTrigger を使用）
• 複雑なイージング、スタガー、多数の要素にまたがる演出のオーケストレーション

主な概念と API

• トゥイーン：
  • gsap.to(targets, vars)
  • gsap.from(targets, vars)
  • gsap.fromTo(targets, fromVars, toVars)
• タイムライン：
  • const tl = gsap.timeline({ defaults, repeat, yoyo, paused })
  • 連結：tl.to(...).from(...).addLabel('x').add(() => ...)
  • 位置パラメーター：絶対位置 1.2、相対位置 "+=0.5"、重ね合わせ "-=0.3"、ラベル "intro"
• イージング：ease: "power2.out"、"expo.inOut"、"elastic.out(1, 0.3)"
• スタガー：stagger: 0.05 または { each, from: "start|center|end|random", grid }
• パフォーマンスに配慮したプロパティ：
  • トランスフォーム（x、y、scale、rotation）と不透明度（autoAlpha）を優先します。
• ScrollTrigger（プラグイン）：
  • gsap.registerPlugin(ScrollTrigger)
  • インライン：gsap.to(".box", { scrollTrigger: ".box", x: 500 })
  • 応用：scrollTrigger: { trigger, start, end, scrub, pin, snap, markers }
  • 単独での使用：ScrollTrigger.create({ trigger, start, end, onUpdate, onToggle })

よくある落とし穴（と対処法）

• レイアウトプロパティ（top/left/width/height）のアニメーション → カクつき
  • トランスフォームを使い、will-change: transform を追加し、強制的なリフローを避けます。
• トリガーのサイズ設定やオーバーフローコンテナーが不適切で、ScrollTrigger が「発火しない」
  • トリガーが存在し、高さがあることを確認し、スクロールコンテナーを確認します（ネストされたスクロールには設定が必要です）。
• SPA／React でクリーンアップしない
  • gsap.context() を使い、アンマウント時に元に戻します。必要に応じて、トリガーを破棄します（ScrollTrigger.getAll().forEach(t => t.kill())）。
• FOUC／フォントや画像の読み込み前に計測する
  • レイアウトが安定してから初期化し、画像の読み込み後に ScrollTrigger.refresh() を実行します。

すぐに使えるレシピ

1) ヒーローの登場アニメーション（スタガー）

gsap.from(".hero [data-anim]", {
  y: 24,
  autoAlpha: 0,
  duration: 0.8,
  ease: "power2.out",
  stagger: 0.06,
});

2) シーケンス付きタイムライン

const tl = gsap.timeline({ defaults: { ease: "power2.out", duration: 0.6 } });
tl.from(".nav", { y: -20, autoAlpha: 0 })
  .from(".hero-title", { y: 30, autoAlpha: 0 }, "-=0.2")
  .from(".hero-cta", { scale: 0.95, autoAlpha: 0 }, "-=0.2");

3) スクロール連動で固定するセクション

gsap.registerPlugin(ScrollTrigger);

gsap.timeline({
  scrollTrigger: {
    trigger: ".story",
    start: "top top",
    end: "+=800",
    scrub: 1,
    pin: true,
  },
}).to(".story .panel", { xPercent: -200 });

要件が不明確な場合にユーザーへ確認すること

• 静的サイトですか、それとも SPA（React/Next/Vue）ですか？ページ遷移はありますか？
• スクロール連動のセクション（固定／スクラブ／スナップ）が必要ですか？
• パフォーマンス上の制約（モバイル対応、モーションの軽減）はありますか？