Ease in quad
quad.in · easeInQuad
A mild acceleration away from the start. Used for fading out, so the layer goes before the eye follows it.
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 in quad 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.
Slow fade-out for the headline
An opacity-only exit with no movement. It is the right choice under a voice-over that is still talking, or at the end of a title sequence where any motion would pull focus from the next shot.
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.
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.