Motion Library · Easing

Overshoot

Overshoot is an easing behavior where an element travels slightly past its final position and springs back, like a ball caught by a glove. It adds energy and physicality to an arrival without adding duration. In code it is usually a back or elastic ease — GSAP's back.out(1.7) is the canonical example.

When to use it

Buttons and badges popping in, a logo landing, a stat pill snapping into place — small elements that should feel alive. Keep the overshoot amount between roughly 1.2 and 2.2; use it on scale and position, rarely on opacity.

Common mistakes

Overshooting large panels (the whole layout wobbles); stacking overshoot on every element so the scene feels like jelly; pairing big overshoot with long durations, which reads as slow motion.

How Impractical uses it

Impractical's convention is back.out(1.7–2.2) for pops and stings, applied to small elements on the beat. Its critic flags bounce-style easing on large surfaces as an anti-pattern — overshoot is seasoning, not structure.