【JavaScript】アニメーションライブラリ「GSAP」の使い方｜導入・to/from・timeline・ScrollTrigger・無料化まで

<!-- コア本体 -->
<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>

npm install gsap

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// プラグインは使う前に登録が必要
gsap.registerPlugin(ScrollTrigger);

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

// 指定した状態 → 現在の状態へ（登場アニメに便利）
gsap.from(".box", { y: 50, opacity: 0, duration: 1 });

// 開始と終了の両方を指定
gsap.fromTo(".box",
  { opacity: 0, x: -100 },   // 開始
  { opacity: 1, x: 0, duration: 1 }  // 終了
);

// .card を 0.15 秒ずつ遅らせて順番に表示
gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.6,
  stagger: 0.15, // 要素ごとの時間差
});

const tl = gsap.timeline({ defaults: { duration: 1 } });

tl.to(".box1", { x: 100 })
  .to(".box2", { y: 100 })
  .to(".box3", { opacity: 0 }, "-=0.5"); // 直前の0.5秒前から重ねて再生

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  x: 300,
  duration: 2,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%", // 要素の上端がビューポートの80%位置に来たら開始
    end: "top 30%",
    scrub: true,      // スクロール量に動きを同期させる
  },
});

gsap.to(".ball", { y: 200, duration: 1.5, ease: "bounce.out" });
gsap.to(".panel", { x: 200, duration: 1, ease: "power2.inOut" });

const mm = gsap.matchMedia();

// 「動きを減らす」設定でない環境だけアニメーションする
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".hero", { y: 50, opacity: 0, duration: 1 });
});

// npm install @gsap/react
import { useGSAP } from "@gsap/react";
import { gsap } from "gsap";
import { useRef } from "react";

function Hero() {
  const root = useRef(null);

  useGSAP(() => {
    // この中のアニメーションはアンマウント時に自動で破棄される
    gsap.from(".title", { y: 50, opacity: 0, duration: 1 });
  }, { scope: root });

  return (
    <div ref={root}>
      <h1 className="title">Hello GSAP</h1>
    </div>
  );
}