Scroll

Sticky Card Stack

Each card pins to the top and scales back slightly as the next scrolls over it, building a tactile stack. Driven by GSAP ScrollTrigger so the timing stays glued to scroll position in both directions.

Open in Figma ↗

What's included

React component (GSAP ScrollTrigger)
Pin + scale timeline
Source Figma file

The code

npm install gsap @gsap/react

"use client";

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

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ children }: { children: React.ReactNode }) {
  const root = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    const cards = gsap.utils.toArray<HTMLElement>(".card");
    cards.forEach((card, i) => {
      gsap.to(card, {
        scale: 1 - (cards.length - i) * 0.03,
        scrollTrigger: {
          trigger: card,
          start: "top 12%",
          endTrigger: cards[cards.length - 1],
          end: "top 12%",
          scrub: true,
          pin: true,
          pinSpacing: false,
        },
      });
    });
  }, { scope: root });

  return <div ref={root}>{children}</div>;
}

Dependencies: gsap, @gsap/react