gsap

GSAP アニメーションのガイドライン

GSAP（GreenSock Animation Platform）、JavaScript、ウェブアニメーションのパフォーマンスに精通したエキスパートとして、アニメーションを作成する際は以下のガイドラインに従ってください。

基本原則

インポートとセットアップ

// Modern ES Module import
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// Register plugins
gsap.registerPlugin(ScrollTrigger);

gsap.to()、gsap.from()、gsap.fromTo()を使用する

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

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

// Animate FROM one state TO another
gsap.fromTo(".element",
  { opacity: 0 },
  { opacity: 1, duration: 0.5 }
);

パフォーマンスの最適化

ハードウェアアクセラレーションを活用する

// Use transforms instead of positional properties
gsap.to(".element", {
  x: 100,      // Good - uses transform
  y: 50,       // Good - uses transform
  rotation: 45, // Good - uses transform
  scale: 1.2,  // Good - uses transform
  // Avoid: left, top, width, height when possible
});

// Enable force3D for GPU acceleration
gsap.to(".element", {
  x: 100,
  force3D: true // Ensures GPU acceleration
});

will-changeは適切に使用する

// Apply will-change before animation
element.style.willChange = "transform";

gsap.to(element, {
  x: 100,
  onComplete: () => {
    element.style.willChange = "auto"; // Remove after animation
  }
});

複数の要素にはstaggerを使用する

// Always use stagger for multiple elements
gsap.to(".items", {
  opacity: 1,
  y: 0,
  stagger: 0.1, // Prevents all elements animating at once
  duration: 0.5
});

// Advanced stagger options
gsap.to(".grid-items", {
  scale: 1,
  stagger: {
    each: 0.1,
    from: "center",
    grid: "auto"
  }
});

ラグスムージングを使用する

// Prevent animation stuttering during CPU spikes
gsap.ticker.lagSmoothing(1000, 16);

タイムラインのベストプラクティス

複雑なシーケンスにはタイムラインを使用する

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

tl.to(".header", { y: 0, opacity: 1 })
  .to(".content", { y: 0, opacity: 1 }, "-=0.3") // Overlap
  .to(".footer", { y: 0, opacity: 1 }, "-=0.3");

整理にはラベルを使用する

const tl = gsap.timeline();

tl.addLabel("start")
  .to(".intro", { opacity: 1 })
  .addLabel("middle")
  .to(".main", { x: 100 })
  .addLabel("end")
  .to(".outro", { opacity: 0 });

// Jump to label
tl.play("middle");

タイムラインを制御する

const tl = gsap.timeline({ paused: true });

// Methods
tl.play();
tl.pause();
tl.reverse();
tl.restart();
tl.seek(1.5); // Go to 1.5 seconds
tl.progress(0.5); // Go to 50%

ScrollTriggerのベストプラクティス

ScrollTriggerの基本設定

gsap.to(".element", {
  x: 500,
  scrollTrigger: {
    trigger: ".element",
    start: "top center",
    end: "bottom center",
    scrub: true,
    markers: false // Enable for debugging only
  }
});

要素を適切にピン留めする

ScrollTrigger.create({
  trigger: ".panel",
  pin: true,
  start: "top top",
  end: "+=500",
  pinSpacing: true
});

パフォーマンス向上のためにScrollTriggerをバッチ処理する

ScrollTrigger.batch(".items", {
  onEnter: (elements) => {
    gsap.to(elements, {
      opacity: 1,
      y: 0,
      stagger: 0.1
    });
  }
});

Reactとの連携

useGSAPフックを使用する

import { useGSAP } from "@gsap/react";

function Component() {
  const containerRef = useRef(null);

  useGSAP(() => {
    gsap.to(".box", { x: 100 });
  }, { scope: containerRef }); // Scopes selectors to container

  return <div ref={containerRef}>...</div>;
}

アニメーションをクリーンアップする

useGSAP(() => {
  const tl = gsap.timeline();
  tl.to(".element", { x: 100 });

  return () => {
    tl.kill(); // Clean up on unmount
  };
}, []);

セレクターの最適化

DOMセレクターをキャッシュする

// Bad - queries DOM on every call
gsap.to(".element", { x: 100 });
gsap.to(".element", { y: 50 });

// Good - cache the reference
const element = document.querySelector(".element");
gsap.to(element, { x: 100 });
gsap.to(element, { y: 50 });

効率化のためにgsap.utilsを使用する

// Convert NodeList to Array
const items = gsap.utils.toArray(".items");

// Create reusable selector
const select = gsap.utils.selector(container);
gsap.to(select(".box"), { x: 100 });

イージング

適切なイージングを使用する

// Common eases for UI
gsap.to(".element", { x: 100, ease: "power2.out" }); // Decelerate
gsap.to(".element", { x: 100, ease: "power2.in" });  // Accelerate
gsap.to(".element", { x: 100, ease: "power2.inOut" }); // Both

// Bounce and elastic for playful UI
gsap.to(".element", { y: 0, ease: "bounce.out" });
gsap.to(".element", { scale: 1, ease: "elastic.out(1, 0.3)" });

SVGアニメーション

SVGプロパティをアニメーションさせる

gsap.to("path", {
  strokeDashoffset: 0,
  duration: 2,
  ease: "none"
});

gsap.to("circle", {
  attr: { r: 50, cx: 200 },
  duration: 1
});

複雑なアニメーション

パスアニメーションにはMotionPathを使用する

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

gsap.to(".element", {
  motionPath: {
    path: "#path",
    align: "#path",
    autoRotate: true
  },
  duration: 5
});

デバッグ

開発中はマーカーを使用する

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

タイムラインの進行状況をデバッグする

tl.eventCallback("onUpdate", () => {
  console.log(tl.progress());
});

ベストプラクティスのまとめ

1. 位置プロパティよりも常にトランスフォームを使用する
2. 複数の要素をアニメーションさせる場合はstaggerを使用する
3. 複雑なシーケンスにはタイムラインを活用する
4. DOMセレクターをキャッシュする
5. ReactではuseGSAPフックを使用する
6. コンポーネントのアンマウント時にアニメーションをクリーンアップする
7. 滑らかな再生のためにラグスムージングを有効にする
8. 実際のデバイス、特にモバイルでテストする