Motion & texture

Spring Animation

Q: How do I implement a Spring Animation?

Use a spring (not a duration-based ease) for the drag-dismiss gesture so it can be interrupted mid-flight and inherit current velocity. Tune damping near critical for text and form controls; allow mild overshoot only on large surfaces like sheets.

Motion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.

Also known as spring physics · bounce animation · elastic motion

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Spring Animation".

Use a spring (not a duration-based ease) for the drag-dismiss gesture so it can be interrupted mid-flight and inherit current velocity. Tune damping near critical for text and form controls; allow mild overshoot only on large surfaces like sheets.

Anatomy:
- stiffness / response: How hard the spring is—main speed control.
- damping: How fast it settles. Damping ratio 1 is critically damped (no overshoot).
- mass: Weight of the object; usually leave alone.
- overshoot: Crossing the target and bouncing back—the spring signature.

Preferred API / pattern: `Framer Motion type:"spring" / react-spring`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Damping too low
○Avoid: Overshoot on text or form fields
○Avoid: Spring on every micro-toggle
○Avoid: Restarting a timed ease when the user grabs again

In plain wordsHow people search for it

“when something pops in and overshoots a little before it settles”“that bouncy iOS feel that tracks your finger”“I drag it and let go and it snaps back with a little bounce”

AnatomyOpen for part names

stiffness / response: How hard the spring is—main speed control.
damping: How fast it settles. Damping ratio 1 is critically damped (no overshoot).
mass: Weight of the object; usually leave alone.
overshoot: Crossing the target and bouncing back—the spring signature.

How to write itOpen for stack patterns

Web (HTML/CSS)Web Animations API / spring libraries

React + Tailwind + shadcn/uiFramer Motion type:"spring" / react-spring

SwiftUIAnimation.spring / .interactiveSpring

Ant Designmotion tokens + CSS; custom spring via JS libs

Notes

Easing says “finish this curve in 300ms.” A spring says “simulate a spring until it rests.” Springs are interruptible: if the user grabs mid-flight, the new gesture inherits velocity instead of restarting a curve. That is the secret of iOS gesture feel. Use springs for drag-driven UI; plain show/hide is fine with easing. Don’t spring everything—constant bounce gets noisy fast.

Common mistakesHumans and models trip here

Damping too low: it jiggles forever like jelly while the user waits.
Overshoot on text or form fields: letters bouncing look cheap—use critical damping.
Spring on every micro-toggle: the UI feels cartoonish; reserve it for gesture-driven motion.
Restarting a timed ease when the user grabs again: velocity is lost—springs solve this.

More failure symptoms on AI broke it.

Related patterns

Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Bottom SheetA panel that rises from the bottom edge—common on mobile for actions and details.Drawer / Side SheetA panel that slides in from an edge, usually over a scrim, for secondary tasks.Pull to RefreshPull a list past a threshold from the top to trigger a reload—mobile muscle memory.

Spotted a wrong name or missing pattern?

Message on X