Spring animation
Motion tuned with physics (stiffness, damping, mass) instead of a duration and a curve, so it settles like a real object.
See it
What it is
A spring animation describes motion with physics instead of a stopwatch. You give it stiffness (how hard it pulls toward the target), damping (how much friction bleeds off the energy), and mass (how heavy the thing feels), then the solver produces the frames. There is no duration and no bezier curve; the numbers decide how long it takes. This is the motion model behind iOS, and behind React Spring, Framer Motion springs, and CSS 'linear()' spring approximations.
Reach for it when something is driven by a gesture or by direct manipulation: sheets, drags, toggles, anything the user can grab. Springs are naturally interruptible, because the solver carries current position and velocity into the new target instead of restarting from zero. That is why a flicked card feels alive and a duration-based one feels like a video scrubbing back.
Gotcha: 'springy' does not have to mean bouncy. Crank damping up to critical and you get a fast, dead-stop settle with zero overshoot, which is what most interface springs should be. Real bounce reads as playful once and annoying the fifth time. Also, because springs have no fixed duration, choreographing them on a timeline is fiddly: you cannot say 'start B when A is 60 percent done' without measuring.
Ask AI for it
Animate this element with a spring instead of a timed easing curve: use a physics spring with stiffness around 300, damping around 30, and mass 1, so it moves fast, overshoots the target only slightly, and settles. Make it interruptible, so a new target picks up from the element's current position and velocity rather than restarting. Animate transform and opacity only, and respect prefers-reduced-motion by snapping to the end state.