GSAPのpin-spacer解説：余白が付く理由と、ReactとNext.jsでピンを直す方法

"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 StackedHero() {
  const root = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      ScrollTrigger.create({
        trigger: ".hero",
        pin: true,
        pinSpacing: false, // no padding: the next section slides over the hero
        start: "top top",
        end: "bottom top",
      });
    },
    { scope: root }
  );

  return (
    <div ref={root}>
      <section className="hero grid h-svh place-items-center bg-zinc-950 text-6xl text-white">Hero</section>
      <section className="relative z-10 h-svh bg-white text-zinc-950">Next section</section>
    </div>
  );
}

// Run in the browser console while the page is open
(() => {
  const props = ["transform", "translate", "rotate", "scale", "perspective",
    "filter", "backdropFilter", "willChange", "contain", "contentVisibility"];
  document.querySelectorAll(".pin-spacer > *").forEach((pinned) => {
    for (let el = pinned.parentElement; el && el !== document.documentElement; el = el.parentElement) {
      const cs = getComputedStyle(el);
      const hits = props.filter((p) => {
        const v = cs[p];
        if (p === "willChange") return /transform|translate|rotate|scale|perspective|filter/.test(v);
        if (p === "contain") return /layout|paint|strict|content/.test(v);
        if (p === "contentVisibility") return v === "auto";
        return Boolean(v) && v !== "none";
      });
      if (hits.length) console.log(pinned, "<-", el, hits.map((p) => `${p}: ${cs[p]}`).join("; "));
    }
  });
})();

"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 steps = ["Search", "Copy", "Paste", "Ship"];

export function PinnedSteps() {
  const root = useRef<HTMLDivElement>(null); // React owns this div. Never pin it.
  const panel = useRef<HTMLElement>(null); // GSAP pins this one and wraps it in .pin-spacer

  useGSAP(
    () => {
      const items = gsap.utils.toArray<HTMLElement>(".step");
      const tl = gsap.timeline({
        defaults: { ease: "none" },
        scrollTrigger: {
          trigger: panel.current,
          pin: panel.current,
          start: "top top",
          end: () => "+=" + window.innerHeight * (items.length - 1),
          scrub: 1,
          anticipatePin: 1,
          invalidateOnRefresh: true,
          markers: process.env.NODE_ENV === "development",
        },
      });

      // Animate the children, not the pinned element itself.
      items.forEach((item, i) => {
        if (i > 0) tl.from(item, { yPercent: 40, autoAlpha: 0 });
        if (i < items.length - 1) tl.to(item, { yPercent: -40, autoAlpha: 0 }, "+=0.5");
      });
    },
    { scope: root }
  );

  return (
    <div ref={root}>
      <section ref={panel} className="relative h-svh overflow-hidden bg-zinc-950 text-white">
        {steps.map((label, i) => (
          <p
            key={label}
            className="step absolute inset-0 grid place-items-center text-5xl font-semibold md:text-7xl"
          >
            {String(i + 1).padStart(2, "0")} {label}
          </p>
        ))}
      </section>
    </div>
  );
}

html {
  scroll-behavior: auto !important;
}

"use client";

import { useEffect } from "react";
import Lenis from "lenis";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export function SmoothScroll() {
  useEffect(() => {
    const lenis = new Lenis();
    lenis.on("scroll", ScrollTrigger.update);

    const tick = (time: number) => lenis.raf(time * 1000);
    gsap.ticker.add(tick);
    gsap.ticker.lagSmoothing(0);

    return () => {
      gsap.ticker.remove(tick);
      lenis.destroy();
    };
  }, []);

  return null;
}