Ease out expo
expo.out · easeOutExpo
Starts very fast and brakes hard into the final position. It reads as sharp and confident, 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 expo 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
Fast headline exit
Exits want to be shorter than entrances. The viewer has already read the line, so lingering on its way out wastes frames. A quick expo.out exit placed against the end of the composition clears the frame for the next shot.
Supporting line exits left, sharply
A horizontal exit implies the story continues off-frame, which suits sequences that cut or push to the next card. Use it on a secondary line so the headline can leave on its own beat.
Headline leaves letter by letter
The mirror of a staggered reveal. If the headline came in one letter at a time, sending it out the same way makes the piece feel designed end to end rather than only at the start.
Snappy staggered subtitle entrance
Supporting lines should arrive faster than the headline and with a tighter stagger, so they read as a beat behind it rather than competing with it. Use it for taglines, dates and calls to action under a main title.
Headline flies forward out of depth
An entrance along Z rather than across the frame. The headline travels toward the camera, which reads as cinematic and suits trailers and title sequences. Pair it with a shallow depth of field so the type comes into focus as it arrives.
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.