Spring physics & overshoot
Also searched as: spring physics, springs, damping, stiffness, overshoot, harmonic oscillator
Canonical Definition
Spring physics is a physical simulation model based on Hooke's Law that computes motion from mass, tension (stiffness), and friction (damping), producing organic overshoot and settlement.
18 to 35 frames until complete equilibrium
Balanced UI: `{ damping: 14, stiffness: 180, mass: 0.8 }`; Playful: `{ damping: 10, stiffness: 220, mass: 0.6 }`
While traditional Bézier curves force an animator to guess bezier handles for every duration, spring physics calculate the natural settling path of physical matter. A card springing into view overshoots its target by 4% and bounces into rest with natural elegance.
Springs are especially powerful in parametric video: if the travel distance changes from 50px to 400px, a spring automatically adjusts its speed and kinetic energy without requiring retiming.
Anatomy of the Spring Function
Tuning mass, damping, and stiffness for the right brand feel
**Mass**: Determines inertia. High mass feels heavy and deliberate; low mass feels nimble and quick.
**Stiffness**: Determines spring pull. High stiffness snaps into place rapidly; low stiffness feels soft and lazy.
**Damping**: Controls friction. Under-damped (< 10) oscillates repeatedly; critically damped (~14-16) overshoots once and rests; over-damped (> 20) never overshoots at all.
How this works: A notification badge pops into scale using a tuned spring with slight overshoot.
- Critical damping ratio: snappy without distracting multiple bounces
- Harmonic settlement synchronized with audio pops
- Responsive to arbitrary scale target changes
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Aim for at most 1 visible overshoot oscillation before settling for commercial and B2B products.
Common Failure Modes (What to avoid)
- Setting damping too low (< 8): elements wobble like jelly for 3 seconds, making the video feel amateurish.
Build spring physics & overshoot in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Easing & easing curves
Easing is the rate at which an animated value changes over time — the mathematical curve defining whether motion accelerates, decelerates, or maintains mechanical constant velocity.
Composition & UIUI motion & microinteractions
UI motion is the animation of user interface elements — buttons, toggles, sheets, tabs, and modals — demonstrating cause and effect and operational feedback inside software.
Motion FundamentalsTiming, spacing & rhythm
Timing is the number of frames an action takes; spacing is the variation in position between successive frames; rhythm is the overarching cadence governing the pace of cuts and arrivals.