【Next.js】GSAP ScrollTrigger の使い方を useGSAP の後片付けまで解説

npm install gsap @gsap/react

"use client";

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

gsap.registerPlugin(useGSAP, ScrollTrigger);

const features = ["導入は1日で完了", "毎週アップデート", "日本語でサポート"];

export function FeatureCards() {
  const container = useRef<HTMLElement>(null);

  useGSAP(
    () => {
      gsap.from(".feature-card", {
        y: 40,
        autoAlpha: 0,
        duration: 0.8,
        ease: "power2.out",
        stagger: 0.15,
        scrollTrigger: {
          trigger: container.current,
          start: "top 75%",
          once: true,
        },
      });
    },
    { scope: container }
  );

  return (
    <section ref={container} className="mx-auto grid max-w-5xl gap-6 px-6 py-24 md:grid-cols-3">
      {features.map((label) => (
        <div key={label} className="feature-card rounded-2xl border border-zinc-200 p-8 text-lg font-medium">
          {label}
        </div>
      ))}
    </section>
  );
}

"use client";

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

gsap.registerPlugin(useGSAP, ScrollTrigger);

export function ScrubBanner() {
  const container = useRef<HTMLElement>(null);

  useGSAP(
    () => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: container.current,
          start: "top bottom",
          end: "bottom top",
          scrub: 1,
        },
      });

      tl.fromTo(".scrub-bg", { scale: 1.25 }, { scale: 1, ease: "none" })
        .fromTo(".scrub-title", { xPercent: -15 }, { xPercent: 15, ease: "none" }, 0);
    },
    { scope: container }
  );

  return (
    <section ref={container} className="relative flex h-[80vh] items-center overflow-hidden">
      <div className="scrub-bg absolute inset-0 bg-gradient-to-br from-sky-500 to-indigo-800" />
      <h2 className="scrub-title relative w-full text-center text-5xl font-semibold text-white md:text-7xl">
        スクロールで動く見出し
      </h2>
    </section>
  );
}

"use client";

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

gsap.registerPlugin(useGSAP, ScrollTrigger);

const panels = ["企画", "デザイン", "実装", "公開"];

export function PinnedSteps() {
  const wrapper = useRef<HTMLDivElement>(null);
  const section = useRef<HTMLElement>(null);
  const track = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      const el = track.current;
      if (!el) return;
      // 横に送る距離 = 並んだパネルの幅 - 画面の幅
      const distance = () => el.scrollWidth - window.innerWidth;

      gsap.to(el, {
        x: () => -distance(),
        ease: "none",
        scrollTrigger: {
          trigger: section.current,
          start: "top top",
          end: () => "+=" + distance(),
          pin: section.current,
          scrub: 1,
          invalidateOnRefresh: true,
        },
      });
    },
    { scope: wrapper }
  );

  return (
    <div ref={wrapper}>
      <section ref={section} className="h-svh overflow-hidden bg-zinc-950 text-white">
        <div ref={track} className="flex h-full w-max">
          {panels.map((label, i) => (
            <div key={label} className="flex w-screen shrink-0 items-center justify-center">
              <p className="text-4xl font-semibold md:text-6xl">
                {String(i + 1).padStart(2, "0")} {label}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

"use client";

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

gsap.registerPlugin(useGSAP, ScrollTrigger);

const features = ["導入は1日で完了", "毎週アップデート", "日本語でサポート"];

export function ResponsiveFeatureCards() {
  const container = useRef<HTMLElement>(null);

  useGSAP(
    () => {
      const mm = gsap.matchMedia(container);

      mm.add(
        {
          isDesktop: "(min-width: 768px)",
          isMobile: "(max-width: 767px)",
          reduceMotion: "(prefers-reduced-motion: reduce)",
        },
        (context) => {
          const { isDesktop, reduceMotion } = context.conditions as {
            isDesktop: boolean;
            reduceMotion: boolean;
          };
          // 動きを減らす設定なら何もしない（最初から表示されたまま）
          if (reduceMotion) return;

          gsap.from(".feature-card", {
            y: isDesktop ? 60 : 20,
            autoAlpha: 0,
            duration: isDesktop ? 0.8 : 0.5,
            stagger: isDesktop ? 0.15 : 0.08,
            scrollTrigger: { trigger: container.current, start: "top 80%", once: true },
          });
        }
      );

      return () => mm.revert();
    },
    { scope: container }
  );

  return (
    <section ref={container} className="mx-auto grid max-w-5xl gap-6 px-6 py-24 md:grid-cols-3">
      {features.map((label) => (
        <div key={label} className="feature-card rounded-2xl border border-zinc-200 p-8 text-lg font-medium">
          {label}
        </div>
      ))}
    </section>
  );
}