Next-Gen CSS Feature

CSS sibling-index() Stagger Effects

Recreating all 6 visual stagger effects featured in the video! Pure CSS dynamic positional staggering without manual classes or JavaScript loops.

/* Things you can do with: sibling-index() */
Video Core Demo

✨ Dynamic Staggered List

Items added dynamically automatically receive their correct stagger delay instantly!

  • One
  • Two
  • Three
  • Four
  • Five
CSS Rule (Exact Video Code) 1 Line Magic
<!-- html -->
<ul>
  <li>One</li><li>Two</li>...
</ul>

/* css */
li {
  animation: in .4s backwards;
  animation-delay: calc(sibling-index() * 100ms);
}

@keyframes in {
  from {
    opacity: 0;
    translate: -20px;
  }
}
00:05 Video Effect

Spiral Fan Stagger

rotate & scale

Radial blades rotated by calc(sibling-index() * 15deg) with staggered entrance.

00:08 Video Effect

Bell Curve Spectrum

Gaussian Math

Vertical bars scaled via sibling index offset calculations forming a smooth bell curve wave.

00:10 Video Effect

Sine Wave Motion

Phase Shift

Glowing dots with phase-shifted keyframe delays: calc(sibling-index() * -120ms).

00:19 Video Effect

Equalizer Spectrum

stagger pulse

Pill columns oscillating vertically with staggered timing offsets across the spectrum.

00:12 Video Effect

Radial Ring Clock

360° Ring Math

16-point circular geometry arranged via calc(sibling-index() * 22.5deg).

Interactive Sandbox

⚙️ Customize Stagger Timing

Stagger Step Delay: 100ms
Color Hue Shift / Step: 15deg
💡 Why sibling-index() changes CSS forever: Previously, staggered animations required hardcoding 20+ :nth-child() rules or writing JavaScript loops. With sibling-index(), it's 1 single line of pure CSS!
📘 Architectural Playbook

Where & When To Use sibling-index()

A practical integration handbook. Discover the top production UI patterns where replacing JavaScript loops or repetitive :nth-child() CSS with sibling-index() dramatically simplifies your codebase.

📱 Navigation UX

Staggered Navigation Drawers

When opening a mobile menu, command palette (Cmd+K), or sidebar, links slide in smoothly one after another.

Live Preview: Menu Open
🏠 Home Dashboard delay: calc(i * 50ms)
📊 Analytics & Stats delay: calc(i * 50ms)
⚙️ Account Settings delay: calc(i * 50ms)
🔔 Notifications delay: calc(i * 50ms)
✨ Why use it: Menu items dynamically rendered from APIs automatically stagger perfectly without JS indexing!
🛍️ Content Feeds

Dynamic Grid & Catalog Entrance

When filtering product categories or loading blog search results, cards cascade onto the screen sequentially rather than appearing all at once.

Filtered Results Stream
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
✨ Why use it: Replaces heavy JS IntersectionObserver stagger controllers with 1 CSS rule.
🔤 Typography

Kinetic Character & Word Reveals

Split headline text into individual letters or words for premium splash screen animations and landing page reveals.

Letter Staggering
✨ Why use it: No manual inline style="--i: 1" attributes on every letter <span>!
🔔 Notifications

Toast Stack & Activity Banners

When multiple alert toasts or system events arrive in rapid succession, each banner pops up smoothly with a tiny time gap.

Notification Feed
Payment Received Just now
New User Signup 2m ago
✨ Why use it: Newly prepended notifications push existing toasts down while maintaining index rhythm.
🎯 Geometry UX

Radial Wheels & Speed Dials

Contextual action wheels, color palettes, or pie speed dials arranged evenly around a central hub using 360° circular angle math.

transform: rotate(calc(sibling-index() * (360deg / N)));

Positions dynamic floating buttons in a 360° fan layout around cursor/button coordinates.

✨ Why use it: Eliminates trigonometric JS calculations for circular UI layouts!
📊 Data Graphics

Pure CSS Sound Meters & Charts

Audio spectrum visualizers, financial sentiment bar graphs, and mathematical curves directly calculated in CSS without Canvas rendering.

animation-delay: calc(sibling-index() * -120ms);

Shifts wave phase timing backwards so all bars animate continuously in sync!

✨ Why use it: Runs entirely on GPU compositor threads for 120 FPS performance.

⚡ Developer Comparison & Best Practices

Evolution of stagger logic in web frontends

Status: Baseline Cross-Browser Supported
Approach Example Code Pros Cons
1. Legacy CSS (:nth-child) li:nth-child(1) { delay: 100ms; }
li:nth-child(2) { delay: 200ms; } ... 		Works everywhere Requires writing 30+ repetitive CSS rules; breaks if list size changes.
2. JavaScript Loop Binding items.forEach((el, i) => {
  el.style.animationDelay = `${i * 100}ms`;
}); 		Dynamic list lengths Requires JS execution, inline style clutter, potential layout reflows.
✨ 3. Modern CSS sibling-index() li {
  animation-delay: calc(sibling-index() * 100ms);
} 		1 line of pure CSS, zero JS, GPU-accelerated, dynamic DOM friendly. Requires progressive fallback variable for legacy browsers.

🛡️ Production Fallback Recipe (Copy-Paste Ready)

/* Progressive Enhancement strategy: CSS Variables Fallback + Native sibling-index() */
.stagger-item {
  /* 1. Default fallback variable mapping for older environments */
  --i: 1;
  animation-delay: calc(var(--i) * 80ms);
}

/* 2. Automatically upgrade when browser supports native sibling-index() */
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .stagger-item {
    --i: sibling-index();
  }
}