vaweGitHub

EasingClassic eases

easeOutElastic

It starts fast and ends slowly. It jumps to the end and rings around it like a rubber band.

easeOutElastic reaches 50% of its travel at 4% of the time and 90% at 7%. Its peak speed is 15.39x the average. It passes the end value by up to 37.31%.

Classic easesfamily: elasticpeak 15.39x

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

Live demo

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

easeOutElastic
linear

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

Numbers

50% of travel
4%of the time
90% of travel
7%of the time
After 10% of time
125%of the travel is done
Peak speed
15.39xtimes the average
Overshoot
37.31%past the end value
Undershoot
0%never below the start
linear() points
161at a 0.002 tolerance
cubic-bezier
nonecannot express it

Copy the code

css linear() (exact)
animation-timing-function: linear(0, 0.0506, 0.1142, 0.1887, 0.2718, 0.3612, 0.4547, 0.5505, 0.6464, 0.7409, 0.8322, 0.919, 1, 1.0743, 1.1411, 1.1998, 1.25, 1.2915, 1.3242, 1.3483, 1.3641, 1.372, 1.3724, 1.366, 1.3536, 1.3357, 1.3132, 1.2868, 1.2575, 1.2259, 1.1928, 1.1589, 1.125, 1.0916, 1.0593, 1.0287, 1, 0.9737, 0.9501, 0.9294, 0.9116, 0.8969, 0.8854, 0.8768, 0.8713, 0.8685, 0.8683, 0.8706, 0.875, 0.8813, 0.8893, 0.8986, 0.909, 0.9201, 0.9318, 0.9438, 0.9558, 0.9676, 0.979, 0.9899, 1, 1.0093, 1.0176, 1.025, 1.0313, 1.0364, 1.0405, 1.0435, 1.0455, 1.0465, 1.0466, 1.0458, 1.0442, 1.042, 1.0391, 1.0359, 1.0322, 1.0282, 1.0241, 1.0199, 1.0156, 1.0115, 1.0074, 1.0036, 1, 0.9967, 0.9938, 0.9912, 0.989, 0.9871, 0.9857, 0.9846, 0.9839, 0.9836, 0.9835, 0.9838, 0.9844, 0.9852, 0.9862, 0.9873, 0.9886, 0.99, 0.9915, 0.993, 0.9945, 0.996, 0.9974, 0.9987, 1, 1.0012, 1.0022, 1.0031, 1.0039, 1.0046, 1.0051, 1.0054, 1.0057, 1.0058, 1.0058, 1.0057, 1.0055, 1.0052, 1.0049, 1.0045, 1.004, 1.0035, 1.003, 1.0025, 1.002, 1.0014, 1.0009, 1.0004, 1, 0.9996, 0.9992, 0.9989, 0.9986, 0.9984, 0.9982, 0.9981, 0.998, 0.9979, 0.9979, 0.998, 0.998, 0.9981, 0.9983, 0.9984, 0.9986, 0.9988, 0.9989, 0.9991, 0.9993, 0.9995, 0.9997, 0.9998, 1, 1.0001, 1.0003, 1.0004, 1);
cubic-bezier: no usable fit
/* Best single fit, off by up to 22 points of travel: cubic-bezier(0.15, 2.13, 0, 0.64) */

A cubic-bezier() has two control points and makes one smooth S. easeOutElastic changes direction 7 times, so no four numbers draw it. Use the linear() string above.

web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 600, easing: 'linear(0, 0.0506, 0.1142, 0.1887, 0.2718, 0.3612, 0.4547, 0.5505, 0.6464, 0.7409, 0.8322, 0.919, 1, 1.0743, 1.1411, 1.1998, 1.25, 1.2915, 1.3242, 1.3483, 1.3641, 1.372, 1.3724, 1.366, 1.3536, 1.3357, 1.3132, 1.2868, 1.2575, 1.2259, 1.1928, 1.1589, 1.125, 1.0916, 1.0593, 1.0287, 1, 0.9737, 0.9501, 0.9294, 0.9116, 0.8969, 0.8854, 0.8768, 0.8713, 0.8685, 0.8683, 0.8706, 0.875, 0.8813, 0.8893, 0.8986, 0.909, 0.9201, 0.9318, 0.9438, 0.9558, 0.9676, 0.979, 0.9899, 1, 1.0093, 1.0176, 1.025, 1.0313, 1.0364, 1.0405, 1.0435, 1.0455, 1.0465, 1.0466, 1.0458, 1.0442, 1.042, 1.0391, 1.0359, 1.0322, 1.0282, 1.0241, 1.0199, 1.0156, 1.0115, 1.0074, 1.0036, 1, 0.9967, 0.9938, 0.9912, 0.989, 0.9871, 0.9857, 0.9846, 0.9839, 0.9836, 0.9835, 0.9838, 0.9844, 0.9852, 0.9862, 0.9873, 0.9886, 0.99, 0.9915, 0.993, 0.9945, 0.996, 0.9974, 0.9987, 1, 1.0012, 1.0022, 1.0031, 1.0039, 1.0046, 1.0051, 1.0054, 1.0057, 1.0058, 1.0058, 1.0057, 1.0055, 1.0052, 1.0049, 1.0045, 1.004, 1.0035, 1.003, 1.0025, 1.002, 1.0014, 1.0009, 1.0004, 1, 0.9996, 0.9992, 0.9989, 0.9986, 0.9984, 0.9982, 0.9981, 0.998, 0.9979, 0.9979, 0.998, 0.998, 0.9981, 0.9983, 0.9984, 0.9986, 0.9988, 0.9989, 0.9991, 0.9993, 0.9995, 0.9997, 0.9998, 1, 1.0001, 1.0003, 1.0004, 1)', fill: 'both' });
vawe
import { easeOutElastic } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

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

When to use it, and when to avoid it

Use it for

  • A single logo or badge that lands with a wobble, for a game or a kids brand.

Avoid it for

  • Text, lists and most product UI: the ringing lasts too long, and it needs 0.8 s or more to be seen.

The nearest vawe ease

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