vaweGitHub

EasingClassic eases

easeOutExpo

It starts fast and ends slowly. An extreme ease: the speed changes by orders of magnitude, so one tenth of the time carries most of the travel.

easeOutExpo reaches 50% of its travel at 10% of the time and 90% at 33%. Its peak speed is 6.93x the average.

Classic easesfamily: expopeak 6.93x

Progress against time0100.51progress50%90%
The dashed line is linear. The dots mark 50% and 90% of the travel.
Velocity, in multiples of average speed01400.51speed, x average
The dashed line is 1x, the speed of linear.

Live demo

The blue box uses the exact linear() string below, in your browser. The grey box is linear.

easeOutExpo
linear

Your system asks for reduced motion, so the boxes rest at the end of the move.

Numbers

50% of travel
10%of the time
90% of travel
33%of the time
After 10% of time
50%of the travel is done
Peak speed
6.93xtimes the average
Overshoot
0%stays inside the end
Undershoot
0%never below the start
linear() points
81at a 0.002 tolerance
cubic-bezier
exactworst gap 0.4 points

Copy the code

css linear() (exact)
animation-timing-function: linear(0, 0.083, 0.1591, 0.2289, 0.2929, 0.3516, 0.4054, 0.4547, 0.5, 0.5415, 0.5796, 0.6144, 0.6464, 0.6758, 0.7027, 0.7274, 0.75, 0.7707, 0.7898, 0.8072, 0.8232, 0.8379, 0.8513, 0.8637, 0.875, 0.8854, 0.8949, 0.9036, 0.9116, 0.9189, 0.9257, 0.9318, 0.9375, 0.9427, 0.9474, 0.9518, 0.9558, 0.9595, 0.9628, 0.9659, 0.9688, 0.9713, 0.9737, 0.9759, 0.9779, 0.9797, 0.9814, 0.983, 0.9844, 0.9857, 0.9869, 0.988, 0.989, 0.9899, 0.9907, 0.9915, 0.9922, 0.9928, 0.9934, 0.994, 0.9945, 0.9949, 0.9954, 0.9957, 0.9961, 0.9964, 0.9967, 0.997, 0.9972, 0.9975, 0.9977, 0.9979, 0.998, 0.9982, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 1);
cubic-bezier (matches within 0.5%)
animation-timing-function: cubic-bezier(0.15, 0.99, 0.31, 1);

Least-squares fit to the easeOutExpo curve; the worst gap is 0.4 points of travel. The linear() string is exact.

web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 600, easing: 'cubic-bezier(0.15, 0.99, 0.31, 1)', fill: 'both' });
vawe
import { easeOutExpo } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

const easing = curveToLinear(easeOutExpo, { tolerance: 0.002 }); // the linear() string above
const x = easeOutExpo(u);                                         // per-frame code, u in 0..1

When to use it, and when to avoid it

Use it for

  • Entrances and replies to a click, where the thing should respond at once and then settle.
  • For expo: a title or number that must snap in and then rest.

Avoid it for

  • Loops: it stops dead at the end and has no speed to hand on.
  • For expo: anything the viewer must follow with the eye: the fast section is too short to track.

The nearest vawe ease

The closest of the nine vawe After Effects eases is land, an RMS gap of 0.0744 in progress. After Effects and vawe set the shape with two handles, so it can be tuned where a named curve cannot.