Inertia
Overshoot and settle after every keyframe.
Inertia waits for a keyframe to arrive, then rings around it — overshooting, coming back, overshooting less, settling. The size of the overshoot comes from how fast the layer was moving when it got there.
It is the classic inertial bounce every motion designer reaches for, and it is the fastest way to make a hard stop feel like a real object stopping.
When to reach for it#
- Anything that stops abruptly and should feel like it has mass.
- UI elements landing in place.
- Bouncy, energetic motion without hand-shaping every curve.
How it works#
At each keyframe, Inertia measures the incoming velocity, then adds a decaying sine wave from that moment on. Faster arrival means bigger overshoot, so a layer that travels a long way in a short time bounces harder — which is what makes it feel physical rather than applied.
It only acts after keyframes. Between them the layer follows its normal interpolation.
Parameters#
How many times it rings per second. Low values give one slow lazy overshoot; high values give a rapid buzz. Between 2 and 4 covers most cases.
How fast the ringing dies. Low values ring for a long time — rubbery. High values settle almost immediately — a firm stop with just a hint of give.
Multiplies the whole effect. 0.3 is subtle. 1 is pronounced. Above 1.5 the first overshoot can travel further than the original move, which reads as elastic rather than heavy.
The property to bounce. Position is the usual one; scale gives you a pop, and rotation gives you a settle.
Recipes#
A UI card landing
- Keyframe the card sliding in and stopping.
- Add Inertia on Position Y, Bounce 3.5, Decay 8, Amplitude 0.4.
Keep the amplitude low on UI. A card that bounces visibly reads as a toy; one that gives slightly reads as solid.
Things that catch people out#
With one keyframe there is no incoming velocity to measure, so nothing happens.
A big amplitude on a card landing at the edge of the frame will push it off-canvas on the first overshoot. Lower Amplitude or raise Decay.
See also#
Something here wrong or missing? Tell us in the community.