Stagger Fade-in on Scroll

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #050910;
  color: #f2f6ff;
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1rem;
  text-align: center;
}

.hero-title {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hero-sub {
  color: #475569;
  font-size: 0.9rem;
}
.hero-arrow {
  font-size: 1.5rem;
  color: #334155;
  margin-top: 1rem;
  animation: bounce 1.5s ease-in-out infinite;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.grid-section {
  padding: 4rem 2rem 8rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0; /* initial state — GSAP reveals */
}

.card-icon {
  font-size: 1.5rem;
  color: #38bdf8;
}

.card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.card p {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.6;
}

if (window.gsap && window.ScrollTrigger) {
  gsap.registerPlugin(ScrollTrigger);

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (reduced) {
    gsap.set(".card", { opacity: 1 });
  } else {
    ScrollTrigger.batch(".card", {
      onEnter: (batch) =>
        gsap.to(batch, {
          opacity: 1,
          y: 0,
          stagger: 0.08,
          duration: 0.6,
          ease: "power2.out",
        }),
      onEnterBack: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.05, duration: 0.4 }),
      onLeave: (batch) => gsap.to(batch, { opacity: 0, y: -20, stagger: 0.05, duration: 0.3 }),
      onLeaveBack: (batch) => gsap.to(batch, { opacity: 0, y: 30, stagger: 0.05, duration: 0.3 }),
      start: "top 88%",
    });

    // Set initial state
    gsap.set(".card", { y: 40 });
  }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stagger Fade on Scroll</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="hero">
    <h1 class="hero-title">Scroll to reveal</h1>
    <p class="hero-sub">Cards stagger in as they enter the viewport</p>
    <div class="hero-arrow">↓</div>
  </div>

  <section class="grid-section">
    <div class="grid">
      <div class="card"><span class="card-icon">✦</span><h3>Motion Design</h3><p>Craft purposeful animations that guide attention.</p></div>
      <div class="card"><span class="card-icon">⬡</span><h3>Typography</h3><p>Type as a design element — weight, rhythm, space.</p></div>
      <div class="card"><span class="card-icon">◈</span><h3>Interaction</h3><p>Micro-interactions that feel alive and responsive.</p></div>
      <div class="card"><span class="card-icon">⊕</span><h3>Layout Systems</h3><p>Grids, spacing, and structure that scale.</p></div>
      <div class="card"><span class="card-icon">⬟</span><h3>Color Theory</h3><p>Intentional palettes that communicate meaning.</p></div>
      <div class="card"><span class="card-icon">◎</span><h3>Performance</h3><p>60fps animations that don't tax the browser.</p></div>
      <div class="card"><span class="card-icon">⬢</span><h3>Accessibility</h3><p>Motion that respects user preferences and needs.</p></div>
      <div class="card"><span class="card-icon">✧</span><h3>Scroll Driven</h3><p>Narrative pacing tied to the scroll position.</p></div>
      <div class="card"><span class="card-icon">⊗</span><h3>3D & WebGL</h3><p>Depth, perspective, and spatial interfaces.</p></div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Stagger Fade-in on Scroll

A grid of cards that stagger-animate into view as they enter the viewport. Uses ScrollTrigger.batch() — the most performant way to stagger multiple elements without creating one ScrollTrigger per element.

How it works

ScrollTrigger.batch() collects elements that enter the viewport within the same animation frame and fires a single onEnter callback with all of them at once:

ScrollTrigger.batch(".card", {
  onEnter: (batch) =>
    gsap.from(batch, {
      opacity: 0, y: 40,
      stagger: 0.1,
      duration: 0.6,
      ease: "power2.out"
    }),
  start: "top 88%"
});

Why batch() over individual ScrollTriggers

One RAF call handles all elements entering together
Prevents the “wave” effect when many elements enter simultaneously
Significantly less memory and CPU overhead on large grids