Why does my back.out look like the element jumps past the target then resets?

That's the overshoot doing its job. If it reads as a bug rather than a spring, drop the strength: `back.out(0.8)` or even `back.out(0.4)`. The default 1.7 is tuned for visible springiness; for subtle UI you often want less.

Should I use back.out or elastic.out?

back.out has a single overshoot then settles. elastic.out oscillates - it overshoots, undershoots, overshoots again, then settles. Use back.out for clean UI motion. Use elastic.out only when you want the bouncy multi-oscillation look (rare in production interfaces).

Does back.out work in reverse?

Reversing a back.out becomes back.in, which feels like the element 'winds up' before launching. For paired open/close, set `easeReverse: true` on the timeline so back.out persists in both directions. Without that flag, the reverse direction reads as 'pull-back-then-snap' which can be the wrong feel.

What's a good back.out strength for hover microinteractions?

0.8-1.2. The default 1.7 reads as too cartoony for most hover states. Lower the strength to keep the springiness present but subtle. For long-duration tweens you can push higher (2-3) without the motion feeling busy.

Can I combine back.out with stagger?

Yes, and it's a nice combination for character stagger - each letter overshoots independently, creating a cascade of springs. Keep the per-letter duration short (0.3-0.5s) so the overshoots don't pile up into chaos.

Easing

back.out

back.out is a GSAP ease that overshoots its destination, then settles back. The element decelerates past the rest position by a small amount, then snaps back into place. The overshoot is what gives the motion its 'springy' character without using true spring physics. The default overshoot is `1.70158`; tune with `back.out(strength)`.

Updated June 2, 2026

Mechanics

How back.out works

Where a normal ease-out decelerates monotonically toward the target, back.out overshoots by an amount controlled by its strength parameter. The element pushes past the destination, then pulls back. The whole motion fits in the tween's duration; the overshoot doesn't extend the timing.

script.js

Strength values: 0 (no overshoot, equivalent to a power ease), 1.7 (default, subtle springiness), 3-4 (cartoony bounce). Above 4 the overshoot starts to look unstable for most UI.

When

Use back.out for

Icon scale-in on hover (button icons that should 'pop')
Modal entrances where a small overshoot adds personality
Notification toasts that should feel friendly, not formal
Character animations (popping text, magnetic pull-back)
Anywhere a true spring would be overkill but plain ease feels flat

Alternatives

Use something else when

Productivity / pro tooling UI where overshoot reads as cute - use expo.out or power3.out
Long-distance motion (hero reveals, scroll-driven) where overshoot looks like a bug - use power.out
Continuous motion (drift, loop) - overshoot has no place in a curve meant to be invisible
True spring physics with damping the user can tune - use a CustomEase or a spring library (Annnimate ships GSAP-only, so use CustomEase)

In production

Used in these Annnimate components

The Magnetic Button uses back.out on the release tween so the cursor's magnetic pull resolves with a small spring back to rest
The Circle Fill Button uses back.out(2) on the icon scale-in so the icon 'pops' into the filled state
The Popping Text uses back.out on per-character entrance so each letter overshoots its rest position
The Tooltip uses back.out on the show transition so the tooltip feels friendly rather than slide-in cold

Used in components

See it running in production

Magnetic ButtonThe button and its text gently pull toward your cursor and drift with it, so it feels like it's reaching for you.

Circle Fill ButtonA circle of colour that grows out from wherever your cursor lands on the button, always taking the same time to fill whether you come in from the middle or the edge.

Popping TextLetters pop into place one by one, scaling up from nothing with a little bounce and a random tilt.

TooltipTooltips that follow your cursor or stick to an element, and flip themselves around when they'd run off the edge of the screen.

FAQ

Common questions

Why does my back.out look like the element jumps past the target then resets?: That's the overshoot doing its job. If it reads as a bug rather than a spring, drop the strength: back.out(0.8) or even back.out(0.4). The default 1.7 is tuned for visible springiness; for subtle UI you often want less.
Should I use back.out or elastic.out?: back.out has a single overshoot then settles. elastic.out oscillates - it overshoots, undershoots, overshoots again, then settles. Use back.out for clean UI motion. Use elastic.out only when you want the bouncy multi-oscillation look (rare in production interfaces).
Does back.out work in reverse?: Reversing a back.out becomes back.in, which feels like the element 'winds up' before launching. For paired open/close, set easeReverse: true on the timeline so back.out persists in both directions. Without that flag, the reverse direction reads as 'pull-back-then-snap' which can be the wrong feel.
What's a good back.out strength for hover microinteractions?: 0.8-1.2. The default 1.7 reads as too cartoony for most hover states. Lower the strength to keep the springiness present but subtle. For long-duration tweens you can push higher (2-3) without the motion feeling busy.
Can I combine back.out with stagger?: Yes, and it's a nice combination for character stagger - each letter overshoots independently, creating a cascade of springs. Keep the per-letter duration short (0.3-0.5s) so the overshoots don't pile up into chaos.

Previoussnapsnap is a GSAP helper that rounds a value to the nearest step in an increment or the nearest entry in an array of allowed values.Nextcirccirc is a GSAP easing family (circ.in, circ.out, circ.inOut) whose curve traces a quarter circle, so the motion is nearly flat through the middle and bends hard at one or both ends.

Related conceptsexpo.out ease-in-out power4.out CustomEase