stagger cascade sequence list motion stagger children animations in a list cascade entrance for grid or card items sequential reveal of navigation links animate multiple sibling elements with delay list items should appear one after another grid cards need a cascading entrance effect
Stagger
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/stagger.json
Stagger sequence
One after another
01
Hero content
Starts first
02
Feature row
Follows with delay
03
Call to action
Lands last
Background
Customize
Quick Start
<ul class="stagger-children"><li>First</li><li>Second</li><li>Third</li></ul>Add .stagger-children to any parent and its children animate in sequence — no JavaScript needed. Supports up to 8 children with configurable delay and duration.
Feature grid with Tailwind
<div class="stagger-children grid grid-cols-1 sm:grid-cols-3 gap-4"
style="--stagger-delay: 80ms">
<div class="glass-subtle rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-violet-500/20 mb-3"></div>
<h3 class="font-semibold text-white">Fast</h3>
<p class="text-sm text-white/60 mt-1">
Zero JS at runtime.
</p>
</div>
<div class="glass-subtle rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-sky-500/20 mb-3"></div>
<h3 class="font-semibold text-white">Composable</h3>
<p class="text-sm text-white/60 mt-1">
Mix with any Tailwind utility.
</p>
</div>
<div class="glass-subtle rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-500/20 mb-3"></div>
<h3 class="font-semibold text-white">Accessible</h3>
<p class="text-sm text-white/60 mt-1">
Respects reduced motion.
</p>
</div>
</div>Customization
.fast-stagger {
--stagger-delay: 30ms; /* Faster cascade */
--stagger-duration: 0.3s; /* Quicker animations */
}
.slow-stagger {
--stagger-delay: 120ms; /* More dramatic timing */
}