Ease out cubic
cubic.out · easeOutCubic
A gentle deceleration into place. Smooth, with no overshoot.
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 cubic 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 slides in from the left on a smooth curve
A cubic.out slide with no overshoot is the quiet option: it decelerates into place and stops. Reach for it in explainer and editorial work, or when the headline sits next to a product shot that should keep the attention.
Letters cascade in from the left
A horizontal cascade follows the reading direction, so the word assembles in the order it is read. With a smooth curve and no overshoot it suits editorial and documentary titles.
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.