Run between the lines
The spring shoots past the dashed line at BOTH ends of the run and settles back — that extra travel is the overshoot; ease-out never crosses a line
Spring Animation
/ transition={{ type: "spring", stiffness, damping }} · linear(…) /
also called spring physics, bouncy animation, spring transition
“It bounces a little past where it lands” is a spring animation — motion driven by physics (stiffness, damping, mass) instead of a duration and curve. The signature is the overshoot: the element passes its target and settles back. Springs also retarget mid-flight gracefully, which is why gesture-driven UIs use them.
Anatomy — every part, named
- 1Overshoot
damping“Where it goes past the line and comes back” is the overshoot — damping controls how much of it survives.
Prompt — paste into your agent
Give this animation spring physics: use Motion's transition={{ type: "spring", stiffness: 300, damping: 22 }} (or react-spring) instead of a duration+easing pair — the element should slightly overshoot its target and settle; raise damping to kill wobble, raise stiffness for snap. For pure CSS, bake the spring into a linear() timing function.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my spring animation (Motion type: "spring", react-spring, CSS linear()). Rule out: damping too low so it wobbles like jelly; stiffness too low so it feels underwater; a duration fighting the physics (springs compute their own settle time); the overshoot clipped by an overflow-hidden parent; interruptions snapping because the spring restarts from the target instead of retargeting from current velocity. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Motion | transition={{ type: "spring", stiffness, damping }} | no duration — the physics decide when it stops |
| CSS | linear(…) | a spring baked into keypoints — springs as pure CSS |
| React | react-spring | |
| SwiftUI | .spring(response:dampingFraction:) | the same idea on Apple platforms |