elite-gsap

Elite GSAP

Web 向けの最も強力なアニメーションライブラリです。すべてのプラグインが完全無料になりました。

2026年の更新：GSAPが無料に

Webflowによる買収に伴い、GSAPのすべてのプラグイン（以前の「Club」プラグインを含む）が、商用利用でも完全無料になりました。

• ScrollTrigger
• SplitText
• Flip
• MorphSVG
• DrawSVG
• MotionPathPlugin
• Physics2D
• Inertia
• CustomEase

ライセンス上の制限はもうありません。

---

クイックリファレンス

トピック	リファレンスファイル
ScrollTrigger	scrolltrigger.md
SplitText	splittext.md
Flip プラグイン	flip-plugin.md
MorphSVG と DrawSVG	morphsvg-drawsvg.md
タイムライン	timelines.md
フレームワーク連携	framework-integration.md
ユーティリティライブラリ	utility-library.md
スムーズスクロール（Lenis）	smooth-scroll.md

---

基本設定

インストール

npm install gsap

プラグインの登録

アプリのエントリーポイントで、プラグインを一度だけ登録します。

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import { Flip } from "gsap/Flip";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";

gsap.registerPlugin(
  ScrollTrigger,
  SplitText,
  Flip,
  DrawSVGPlugin,
  MorphSVGPlugin,
  MotionPathPlugin,
);

---

コンテキストとクリーンアップ（重要）

アニメーションのスコープを設定するには、必ず gsap.context() を使用してください。これにより、SPAやコンポーネントベースのフレームワークでメモリリークを防止できます。

Vanilla JS

// Create context scoped to a container
const ctx = gsap.context(() => {
  // All animations and ScrollTriggers created here
  // are automatically tracked
  gsap.from(".hero-title", { opacity: 0, y: 50 });
  gsap.from(".hero-description", { opacity: 0, y: 30, delay: 0.3 });

  ScrollTrigger.create({
    trigger: ".section",
    start: "top center",
    onEnter: () => console.log("entered"),
  });
}, containerElement); // Scope to container

// Later: Clean up everything
ctx.revert(); // Reverts all animations and kills ScrollTriggers

重要な理由

コンテキストを使用しない場合：

• コンポーネントのアンマウント後もアニメーションが継続します
• ScrollTriggerが、削除された要素の監視を続けます
• メモリリークが蓄積します
• SPAのナビゲーションによってアニメーションが壊れます

コンテキストを使用する場合：

• revert() を一度呼び出すだけで、すべてをクリーンアップできます
• React／Vue／Svelteのコンポーネントでも安全に使用できます
• 古い参照が残りません

---

基本的なアニメーションパターン

基本的なトゥイーン

// Animate TO a state
gsap.to(".element", {
  x: 100,
  opacity: 0.5,
  duration: 1,
  ease: "power2.out",
});

// Animate FROM a state
gsap.from(".element", {
  opacity: 0,
  y: 50,
  duration: 0.8,
  ease: "power3.out",
});

// FROM-TO for full control
gsap.fromTo(
  ".element",
  { opacity: 0, y: 50 },
  { opacity: 1, y: 0, duration: 0.8 },
);

// Set immediately (no animation)
gsap.set(".element", { opacity: 1, y: 0 });

スタガーアニメーション

// Basic stagger
gsap.from(".card", {
  opacity: 0,
  y: 30,
  duration: 0.6,
  stagger: 0.1, // 100ms between each
});

// Advanced stagger
gsap.from(".grid-item", {
  opacity: 0,
  scale: 0.8,
  duration: 0.5,
  stagger: {
    each: 0.1,
    from: "center", // 'start', 'end', 'center', 'edges', 'random', or index
    grid: [4, 6], // For grid layouts
    axis: "x", // 'x', 'y', or null for both
  },
});

イージング

// Power eases (most common)
gsap.to(".el", { x: 100, ease: "power1.out" }); // Subtle
gsap.to(".el", { x: 100, ease: "power2.out" }); // Balanced (recommended)
gsap.to(".el", { x: 100, ease: "power3.out" }); // Snappy
gsap.to(".el", { x: 100, ease: "power4.out" }); // Dramatic

// Ease directions
// .in - starts slow, accelerates
// .out - starts fast, decelerates (default)
// .inOut - slow at both ends

// Special eases
gsap.to(".el", { x: 100, ease: "elastic.out(1, 0.3)" });
gsap.to(".el", { x: 100, ease: "back.out(1.7)" });
gsap.to(".el", { x: 100, ease: "bounce.out" });

// Custom ease
gsap.to(".el", { x: 100, ease: "M0,0 C0.7,0 0.3,1 1,1" }); // Bezier

コールバック

gsap.to(".element", {
  x: 100,
  duration: 1,
  onStart: () => console.log("Animation started"),
  onUpdate: () => console.log("Frame update"),
  onComplete: () => console.log("Animation complete"),
  onReverseComplete: () => console.log("Reversed to start"),
});

---

prefers-reduced-motion（重要）

ユーザーのモーション設定を必ず尊重してください。

const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  // Full animations
  gsap.from(".hero", {
    opacity: 0,
    y: 50,
    duration: 1,
    ease: "power3.out",
  });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  // Instant or simple fade
  gsap.set(".hero", { opacity: 1, y: 0 });
  // Or: gsap.from('.hero', { opacity: 0, duration: 0.3 });
});

包括的なパターンについては、elite-accessibility スキルを参照してください。

---

GPUアクセラレーション対応プロパティ

60fpsのパフォーマンスを実現するには、次のプロパティのみをアニメーションさせてください。

• x、y（translateX、translateY）
• xPercent、yPercent
• scale、scaleX、scaleY
• rotation、rotationX、rotationY
• opacity

次のプロパティはアニメーションさせないでください。

• width、height
• top、left、right、bottom
• margin、padding
• border-width

// GOOD - GPU accelerated
gsap.to(".card", { x: 100, y: 50, scale: 1.1, rotation: 5, opacity: 0.8 });

// BAD - Causes reflows
gsap.to(".card", { width: 200, height: 200, marginLeft: 50 });

---

ScrollTrigger クイックスタート

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

// Basic scroll-triggered animation
gsap.from(".section-content", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    trigger: ".section",
    start: "top 80%", // When top of trigger hits 80% of viewport
    end: "bottom 20%",
    toggleActions: "play none none none",
    // markers: true  // Dev only
  },
});

// Pinned section
ScrollTrigger.create({
  trigger: ".sticky-section",
  start: "top top",
  end: "+=100%",
  pin: true,
  pinSpacing: true,
});

// Scrub animation (tied to scroll position)
gsap.to(".parallax-element", {
  y: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-section",
    start: "top bottom",
    end: "bottom top",
    scrub: true,
  },
});

包括的なパターンについては、scrolltrigger.md を参照してください。

---

SplitText クイックスタート

import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);

// Split text into characters
const split = new SplitText(".headline", {
  type: "chars,words,lines",
  linesClass: "line",
});

// Animate characters
gsap.from(split.chars, {
  opacity: 0,
  y: 50,
  rotationX: -90,
  stagger: 0.02,
  duration: 0.8,
  ease: "power4.out",
});

// IMPORTANT: Revert when done (or on cleanup)
// split.revert();

テキストアニメーションのパターンについては、splittext.md を参照してください。

---

Flip プラグインのクイックスタート

import { Flip } from "gsap/Flip";
gsap.registerPlugin(Flip);

// Capture current state
const state = Flip.getState(".cards");

// Make DOM changes
container.appendChild(newCard);
// or
card.classList.toggle("expanded");
// or
filterCards();

// Animate the change
Flip.from(state, {
  duration: 0.6,
  ease: "power2.inOut",
  stagger: 0.05,
  absolute: true, // Prevents layout shift during animation
  onEnter: (elements) => gsap.from(elements, { opacity: 0, scale: 0.8 }),
  onLeave: (elements) => gsap.to(elements, { opacity: 0, scale: 0.8 }),
});

レイアウトアニメーションのパターンについては、flip-plugin.md を参照してください。

---

タイムラインのクイックスタート

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

tl.from(".hero-title", { opacity: 0, y: 50 })
  .from(".hero-description", { opacity: 0, y: 30 }, "-=0.5") // Overlap
  .from(".hero-cta", { opacity: 0, y: 20 }, "-=0.3")
  .from(".hero-image", { opacity: 0, scale: 0.9 }, "<"); // Same time as previous

// Control
tl.play();
tl.pause();
tl.reverse();
tl.seek(0.5); // Jump to 0.5 seconds
tl.progress(0.5); // Jump to 50%

オーケストレーションのパターンについては、timelines.md を参照してください。

---

よく使われるパターン

スクロール時に表示

const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.utils.toArray(".reveal").forEach((element) => {
    gsap.from(element, {
      opacity: 0,
      y: 40,
      duration: 0.8,
      ease: "power3.out",
      scrollTrigger: {
        trigger: element,
        start: "top 85%",
        toggleActions: "play none none none",
      },
    });
  });
});

水平スクロールセクション

const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  const panels = gsap.utils.toArray(".panel");
  const wrapper = document.querySelector(".horizontal-wrapper");

  gsap.to(panels, {
    xPercent: -100 * (panels.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: wrapper,
      pin: true,
      scrub: 1,
      snap: 1 / (panels.length - 1),
      end: () => "+=" + wrapper.scrollWidth,
    },
  });
});

マグネティックボタン

const button = document.querySelector(".magnetic-btn");

button.addEventListener("mousemove", (e) => {
  const rect = button.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;

  gsap.to(button, {
    x: x * 0.3,
    y: y * 0.3,
    duration: 0.3,
    ease: "power2.out",
  });
});

button.addEventListener("mouseleave", () => {
  gsap.to(button, {
    x: 0,
    y: 0,
    duration: 0.5,
    ease: "elastic.out(1, 0.3)",
  });
});

マスクを使ったテキスト表示

const split = new SplitText(".headline", { type: "lines", linesClass: "line" });

// Wrap each line in a mask container
split.lines.forEach((line) => {
  const wrapper = document.createElement("div");
  wrapper.style.overflow = "hidden";
  line.parentNode.insertBefore(wrapper, line);
  wrapper.appendChild(line);
});

gsap.from(split.lines, {
  yPercent: 100,
  opacity: 0,
  duration: 1,
  stagger: 0.1,
  ease: "power4.out",
});

---

デバッグ

// Enable dev warnings
gsap.config({
  nullTargetWarn: true,
});

// ScrollTrigger markers (dev only)
ScrollTrigger.defaults({
  markers: process.env.NODE_ENV === "development",
});

// Log animation state
gsap.to(".el", {
  x: 100,
  onUpdate: function () {
    console.log("Progress:", this.progress());
  },
});

---

フレームワーク連携

以下については、framework-integration.md を参照してください。

• @gsap/react を使った React
• Vue の Composition API パターン
• Svelte のライフサイクルパターン
• Vanilla JS のモジュールパターン

---

関連スキル

• elite-accessibility - モーションアクセシビリティと prefers-reduced-motion のパターン
• elite-performance - ビルドの最適化と Core Web Vitals
• elite-css-animations - CSSネイティブのアニメーション代替手段
• elite-layouts - レイアウトパターン（ベントーグリッド、水平スクロール、スティッキーセクション）
• elite-brand-design - ブランドアイデンティティとビジュアルシステム

---

Resources

• GSAP Docs
• GSAP Eases Visualizer
• ScrollTrigger Demos
• GreenSock Forums