Staggered Grid Entrance

Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.

intersection-observer css-keyframes

Target: JS HTML

Codice

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #070a12;
  --panel: #121a2b;
  --border: #263249;
  --text: #f0f4fb;
  --muted: #8a95a8;
  --accent: #86e8ff;
  --neon-purple: #ae52ff;
  --neon-pink: #ff40d6;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "SF Pro Display", system-ui, sans-serif;
  min-height: 100vh;
}

/* ── Header ── */
.header {
  text-align: center;
  padding: 5rem 2rem 2rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.subtitle {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--muted);
  max-width: 480px;
  margin: 0.75rem auto 0;
  line-height: 1.6;
}

/* ── Style picker ── */
.style-picker {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem 2rem;
  flex-wrap: wrap;
}

.style-btn {
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font: 600 0.78rem / 1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
}

.style-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.style-btn.active {
  background: rgba(134, 232, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Grid ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

/* ── Grid items ── */
.grid-item {
  aspect-ratio: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  will-change: transform, opacity;

  /* Initial hidden state */
  opacity: 0;
}

.grid-item .item-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: linear-gradient(
    135deg,
    hsl(var(--item-hue, 200) 70% 70%),
    hsl(calc(var(--item-hue, 200) + 40) 60% 50%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grid-item .item-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ══════════════════════
   Animation styles
   ══════════════════════ */

/* Fade Up (default) */
.anim-fade-up {
  transform: translateY(40px);
}
.anim-fade-up.visible {
  animation: fadeUp 0.6s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In */
.anim-scale-in {
  transform: scale(0.7);
}
.anim-scale-in.visible {
  animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Sides (alternating left/right) */
.anim-slide-sides {
  transform: translateX(var(--slide-dir, 1) * 60px);
}
.anim-slide-sides.visible {
  animation: slideSide 0.6s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes slideSide {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Flip */
.anim-flip {
  transform: perspective(600px) rotateY(60deg);
}
.anim-flip.visible {
  animation: flip 0.7s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes flip {
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg);
  }
}

/* ── Reduced motion ── */
.reduced-motion .grid-item {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 2rem;
}

.btn-back {
  display: inline-block;
  padding: 0.7rem 2rem;
  border-radius: 999px;
  border: 1px solid rgba(134, 232, 255, 0.3);
  color: var(--accent);
  text-decoration: none;
  font: 600 0.85rem / 1 "Inter", system-ui, sans-serif;
  transition: all 0.25s ease;
}

.btn-back:hover {
  background: rgba(134, 232, 255, 0.08);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: 0 1rem 2rem;
  }
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

// ── Demo shell ──
initDemoShell({
  title: "Staggered Grid Entrance",
  category: "css-canvas",
  tech: ["intersection-observer", "css-keyframes"],
});

let reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");

window.addEventListener("motion-preference", (e) => {
  reduced = e.detail.reduced;
  document.documentElement.classList.toggle("reduced-motion", reduced);
});

// ── Config ──
const ITEM_COUNT = 24;
const grid = document.getElementById("grid");
let currentStyle = "fade-up";
let observer = null;

// ── Labels for items ──
const labels = [
  "Motion",
  "Design",
  "Scroll",
  "Canvas",
  "WebGL",
  "Shader",
  "Particle",
  "Spring",
  "Easing",
  "Timeline",
  "Trigger",
  "Parallax",
  "Morph",
  "Blend",
  "Filter",
  "Stagger",
  "Pinch",
  "Orbit",
  "Flow",
  "Ripple",
  "Glow",
  "Pulse",
  "Wave",
  "Drift",
];

// ── Generate grid items ──
function generateItems() {
  grid.innerHTML = "";

  for (let i = 0; i < ITEM_COUNT; i++) {
    const item = document.createElement("div");
    item.className = `grid-item anim-${currentStyle}`;

    // Compute grid position for stagger delay
    const cols = getColumnCount();
    const row = Math.floor(i / cols);
    const col = i % cols;
    const delay = row * 0.05 + col * 0.08;
    item.style.setProperty("--delay", `${delay}s`);

    // Hue based on position
    const hue = (i / ITEM_COUNT) * 360;
    item.style.setProperty("--item-hue", String(Math.round(hue)));

    // For slide-sides: alternate direction based on column
    item.style.setProperty("--slide-dir", col % 2 === 0 ? "-1" : "1");

    item.innerHTML = `
      <span class="item-number">${String(i + 1).padStart(2, "0")}</span>
      <span class="item-label">${labels[i] || "Item"}</span>
    `;

    grid.appendChild(item);
  }

  setupObserver();
}

// ── Get current column count ──
function getColumnCount() {
  if (grid.children.length === 0) return 4;
  const gridStyle = getComputedStyle(grid);
  const cols = gridStyle.gridTemplateColumns.split(" ").length;
  return cols;
}

// ── IntersectionObserver ──
function setupObserver() {
  if (observer) observer.disconnect();

  observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.15, rootMargin: "0px 0px -50px 0px" }
  );

  document.querySelectorAll(".grid-item").forEach((item) => {
    if (!reduced) {
      observer.observe(item);
    } else {
      item.classList.add("visible");
    }
  });
}

// ── Style picker ──
document.querySelectorAll(".style-btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    document.querySelectorAll(".style-btn").forEach((b) => b.classList.remove("active"));
    btn.classList.add("active");
    currentStyle = btn.dataset.style;

    // Reset and regenerate
    generateItems();

    // Scroll back to grid to re-trigger animations
    grid.scrollIntoView({ behavior: "smooth", block: "start" });
  });
});

// ── Recalculate delays on resize ──
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const cols = getColumnCount();
    document.querySelectorAll(".grid-item").forEach((item, i) => {
      const row = Math.floor(i / cols);
      const col = i % cols;
      const delay = row * 0.05 + col * 0.08;
      item.style.setProperty("--delay", `${delay}s`);
      item.style.setProperty("--slide-dir", col % 2 === 0 ? "-1" : "1");
    });
  }, 200);
});

// ── Init ──
generateItems();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Staggered Grid Entrance — stealthisdesign</title>
  <link rel="stylesheet" href="style.css">
  </head>
<body>
  <header class="header">
    <span class="eyebrow">Demo 19</span>
    <h1>Staggered Grid Entrance</h1>
    <p class="subtitle">Scroll down to see grid items animate in with position-based stagger delays. Switch between animation styles.</p>
  </header>

  <nav class="style-picker">
    <button class="style-btn active" data-style="fade-up">Fade Up</button>
    <button class="style-btn" data-style="scale-in">Scale In</button>
    <button class="style-btn" data-style="slide-sides">Slide Sides</button>
    <button class="style-btn" data-style="flip">Flip</button>
  </nav>

  <div class="grid" id="grid"></div>

  <div class="footer">
    <a href="/" class="btn-back">Back to Showcase</a>
  </div>

  <script src="script.js"></script>
</body>
</html>

Staggered Grid Entrance

Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.

Source

Repository: libs-genclaude
Original demo id: 19-staggered-grid

Notes

Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.