spring bounce enter entrance overshoot cubic-bezier stagger animation card or modal appearing on page load list items entering with staggered delay CTA button drawing attention on first render notification or toast popping in entrance animations feel mechanical (linear/ease-in-out) list reveals lack natural timing want spring physics feel without JavaScript
Spring Bounce
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/spring-bounce.json Preview
Background
Customize
Quick Start
<div class="spring-bounce rounded-xl bg-white p-6 shadow">Hello</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1020 bytes · 48 lines
- Custom Properties
-
--spring-duration--spring-delay--spring-distance - Classes
-
.spring-bounce.spring-stagger
spring bounce enter entrance overshoot cubic-bezier stagger animation
The cubic-bezier (0.34, 1.56, 0.64, 1) overshoots scale 1.0 during the entrance — the element briefly exceeds its final size before settling. This creates a spring-like feel with no JavaScript.
prefers-reduced-motion replaces the transform-heavy animation with a simple opacity fade.
Single element
<div class="spring-bounce rounded-2xl bg-white p-8 shadow-xl max-w-sm">
<h2 class="text-xl font-bold text-slate-800 mb-2">Welcome</h2>
<p class="text-slate-500 text-sm">Page content springs into view.</p>
</div>Staggered card grid
<div class="spring-stagger grid grid-cols-3 gap-4">
<div class="rounded-xl bg-white p-6 shadow">Card 1</div>
<div class="rounded-xl bg-white p-6 shadow">Card 2</div>
<div class="rounded-xl bg-white p-6 shadow">Card 3</div>
<div class="rounded-xl bg-white p-6 shadow">Card 4</div>
<div class="rounded-xl bg-white p-6 shadow">Card 5</div>
<div class="rounded-xl bg-white p-6 shadow">Card 6</div>
</div>Custom timing
<div class="spring-bounce rounded-xl bg-indigo-600 px-8 py-4 text-white font-bold"
style="--spring-duration: 0.8s; --spring-delay: 0.2s; --spring-distance: 40px;">
Delayed spring
</div>