Ease out back
back.out · easeOutBack
Starts fast, travels a little past the target and settles back onto it. The overshoot percentage is how far past it goes.
Try this curve in the studioLive easing graph
Time runs left to right; progress runs bottom to top. Values outside 0–1 show anticipation and overshoot. Back and elastic use the studio's default overshoot setting of 10%.
Copy ease out back CSS
This CSS linear() timing function approximates the studio curve with 401 evenly spaced samples. It preserves rebounds and overshoot; it is not a cubic Bézier fit. Use it as an animation or transition timing function in browsers that support CSS linear().
Use it in motion design
Apply this curve to a headline entrance, then edit its duration and distance in the studio.
Try this in the studioMotion recipes
Headline enters from below with overshoot
The default launch-graphic entrance. A long travel on a back.out curve reads as confident, and the small overshoot gives the headline a moment of weight as it lands without turning into a bounce. Use it when the headline is the first thing on screen and has to own the frame.
Letter-by-letter headline reveal with overshoot
The workhorse of kinetic typography. Each character gets the same rise and settle, offset by 30ms, so the word reads as a wave. Short headlines can take a longer stagger; long ones need it shorter or the last letter arrives too late.
Staggered headline with a 12% overshoot
Say the overshoot as a number and the planner writes that number. 12% with a 40ms stagger is loud enough for a sale or launch announcement. Halve both when the brand is quieter.
More easing curves
Prefer a spring?
Tune stiffness, damping and mass in the spring animation playground and see the settling time it works out.
Timing in frames?
Turn a frame count into the seconds or milliseconds this curve needs with the frames to seconds and milliseconds calculator.
Stagger it
Time a list or a row of letters entering one after another with the stagger animation calculator, then copy its CSS.