stagger reveal delay list animation fade-up sequence Feature-Listen die gestaffelt einblenden Nav-Links mit sequentiellem Eingang Card-Grids oder Listen mit Verzögerungs-Staffelung Alle Elemente erscheinen gleichzeitig — kein visueller Fluss Gestaffelte Animationen ohne JS-Orchestrierung
Stagger Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/stagger-reveal.json
🎨
Design tokens
Colors, spacing, and typography
⚡
Motion presets
Enter, fade-up, stagger
🧩
Pattern library
Hero, CTA, Pricing, FAQ
📦
Export targets
HTML, Astro, Web Component
Background
Customize
Quick Start
<ul><li class="stagger-reveal" style="--stagger-index: 0">First</li><li class="stagger-reveal" style="--stagger-index: 1">Second</li></ul>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 478 bytes · 24 lines
- Custom Properties
-
--stagger-index--stagger-step--stagger-duration - Classes
-
.stagger-reveal
stagger reveal delay list animation fade-up sequence
Das Delay wird per calc(var(--stagger-index) * var(--stagger-step)) berechnet — kein JavaScript, kein nth-child-Hack. --stagger-step (Standard: 80ms) und --stagger-duration sind pro Kontext überschreibbar. Jedes Element bekommt inline style="--stagger-index: N".