Overshoot easing
Also called back easing, ease-out-back, or easeOutBack
An easing curve that runs slightly past its end point and then settles back, giving motion a small, springy kick.
export function InboxLink({ unread }: { unread: number }) {
return (
<a
href='/inbox'
className='inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted'
>
Inbox
{unread > 0 && (
// cubic-bezier(0.34, 1.56, 0.64, 1) runs about 10% past full size,
// then settles. Reduced motion keeps only the fade.
<span className='grid h-5 min-w-5 place-items-center rounded-full bg-blue-600 px-1.5 text-xs font-semibold text-white transition-[opacity,scale] duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] starting:opacity-0 motion-safe:starting:scale-50'>
{unread}
</span>
)}
</a>
);
}When the notification badge appears, scale it from 0.5 to 1 and fade it in over 300ms with an overshoot curve, cubic-bezier(0.34, 1.56, 0.64, 1), so it pops slightly past full size and settles. Use a plain fade with no scaling when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Overshoot easing?
With overshoot easing, the element travels a little beyond where it should stop, then eases back into place. On a graph, the curve rises above the top of the box before settling at 1. A common version, often called easeOutBack, is cubic-bezier(0.34, 1.56, 0.64, 1), which goes about 10% past the end.
A small overshoot adds personality to toggles, badges, and buttons that pop into view. Keep it subtle and save it for playful, occasional moments; on menus and dialogs people open all day, the bounce gets tiring.
Overshoot can push an element past its container or into a neighbor, so leave room for it, or apply it to scale instead of position. A spring animation gives a similar effect and also responds naturally when it is interrupted.
Often confused with
- Spring animation
- A spring computes its overshoot from physics, so it can wobble more than once and adapts when interrupted. Overshoot easing is a fixed curve that passes the target once.
Related terms
All termsPop in
An entrance animation where an element scales up past its full size and settles back, giving it a quick, springy arrival.
Bounce
A spring setting from 0 to 1 for how much an element overshoots and wobbles, used with a duration in place of stiffness and damping.
Cubic-bezier
A CSS function that defines a custom easing curve with four numbers: the positions of two control points that bend the curve.
Anticipation
A small move in the opposite direction just before the main action, like crouching before a jump, so the motion that follows reads clearly.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.