stagger entrance scroll animation grid list reveal feature grid reveal on scroll card row or pricing table entrance team or testimonial section grids and card rows appear abruptly without scroll context need staggered entrance without a GSAP dependency
Stagger Entrance
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/stagger-entrance.json Preview
Background
Customize
Quick Start
<ul class="stagger-entrance grid grid-cols-3 gap-6">...</ul>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 614 bytes · 25 lines
- Custom Properties
-
--stagger-delay--stagger-distance--stagger-duration--stagger-easing - Classes
-
.stagger-entrance
stagger entrance scroll animation grid list reveal
Wrap any grid or list in .stagger-entrance. The companion JS assigns --stagger-index to each child and fires is-visible via IntersectionObserver when the container reaches 15% viewport coverage. No GSAP — pure CSS transitions.
Feature grid
<div class="stagger-entrance grid grid-cols-1 gap-6 sm:grid-cols-3">
<div class="rounded-xl border p-6">Feature 1</div>
<div class="rounded-xl border p-6">Feature 2</div>
<div class="rounded-xl border p-6">Feature 3</div>
</div>Slower, larger stagger
<ul class="stagger-entrance" style="--stagger-delay: 120ms; --stagger-distance: 2rem; --stagger-duration: 0.6s">
<li>Item A</li>
<li>Item B</li>
</ul>