Spring easing
An animation curve based on the physics of a spring rather than a fixed cubic-bezier function.
Traditional CSS easing uses fixed curves — `ease-out`, `cubic-bezier(...)` — that always take the same time. Spring easing instead simulates a real spring: tension, friction, mass, sometimes an initial velocity. The animation can settle naturally, overshoot slightly, or bounce, depending on the parameters. Springs feel more alive than fixed curves, which is why iOS and Material both lean on them. The CSS `linear()` function and the upcoming `spring()` work bring the same to the web.
Also called
When to use
- Interactive elements where natural feel matters (drag-and-release, pull-to-refresh)
- Bottom sheets, popovers, and panels that should feel physical
- Anywhere a small overshoot makes the motion feel responsive
When not to use
- Functional UI transitions where consistency matters more than personality
- High-frequency animations where the variable duration would feel inconsistent
Related
Source
Physics simulation in animation; iOS UIKit Dynamics and Apple Spring are canonical references. CSS is gaining native spring support via the `linear()` easing function and proposed `spring()`.