vaweGitHub

EasingClassic eases

easeInOutElastic

It is slow at both ends and fast in the middle. It rings at both ends and crosses in the middle.

easeInOutElastic reaches 50% of its travel at 50% of the time and 90% at 54%. Its peak speed is 10.12x the average. It passes the end value by up to 11.83%.

Classic easesfamily: elasticpeak 10.12x

Progress against time0100.51progress50%90%
The dashed line is linear. The dots mark 50% and 90% of the travel.
Velocity, in multiples of average speed01800.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.

easeInOutElastic
linear

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

Numbers

50% of travel
50%of the time
90% of travel
54%of the time
After 10% of time
0.03%of the travel is done
Peak speed
10.12xtimes the average
Overshoot
11.83%past the end value
Undershoot
11.83%below the start value
linear() points
161at a 0.002 tolerance
cubic-bezier
nonecannot express it

Copy the code

css linear() (exact)
animation-timing-function: linear(0, 0.0002, 0.0003, 0.0004, 0.0005, 0.0007, 0.0008, 0.0009, 0.001, 0.001, 0.0011, 0.0011, 0.0011, 0.001, 0.0008, 0.0006, 0.0003, 0, -0.0004, -0.0009, -0.0014, -0.0019, -0.0025, -0.0031, -0.0037, -0.0042, -0.0046, -0.005, -0.0052, -0.0052, -0.005, -0.0046, -0.0039, -0.0029, -0.0016, 0, 0.0019, 0.0041, 0.0066, 0.0092, 0.012, 0.0148, 0.0175, 0.02, 0.0221, 0.0237, 0.0247, 0.0248, 0.0239, 0.0219, 0.0186, 0.0139, 0.0077, 0, -0.0091, -0.0196, -0.0313, -0.0438, -0.0569, -0.0702, -0.0831, -0.0949, -0.1051, -0.1129, -0.1175, -0.1181, -0.1139, -0.1042, -0.0884, -0.0659, -0.0365, 0, 0.0434, 0.0932, 0.1487, 0.2084, 0.2708, 0.3339, 0.3951, 0.4515, 0.5, 0.5485, 0.6049, 0.6661, 0.7292, 0.7916, 0.8513, 0.9068, 0.9566, 1, 1.0365, 1.0659, 1.0884, 1.1042, 1.1139, 1.1181, 1.1175, 1.1129, 1.1051, 1.0949, 1.0831, 1.0702, 1.0569, 1.0438, 1.0313, 1.0196, 1.0091, 1, 0.9923, 0.9861, 0.9814, 0.9781, 0.9761, 0.9752, 0.9753, 0.9763, 0.9779, 0.98, 0.9825, 0.9852, 0.988, 0.9908, 0.9934, 0.9959, 0.9981, 1, 1.0016, 1.0029, 1.0039, 1.0046, 1.005, 1.0052, 1.0052, 1.005, 1.0046, 1.0042, 1.0037, 1.0031, 1.0025, 1.0019, 1.0014, 1.0009, 1.0004, 1, 0.9997, 0.9994, 0.9992, 0.999, 0.9989, 0.9989, 0.9989, 0.999, 0.999, 0.9991, 0.9992, 0.9993, 0.9995, 0.9996, 0.9997, 0.9998, 1);
cubic-bezier: no usable fit
/* Best single fit, off by up to 15 points of travel: cubic-bezier(0.96, -0.36, 0.04, 1.36) */

A cubic-bezier() has two control points and makes one smooth S. easeInOutElastic changes direction 8 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.0002, 0.0003, 0.0004, 0.0005, 0.0007, 0.0008, 0.0009, 0.001, 0.001, 0.0011, 0.0011, 0.0011, 0.001, 0.0008, 0.0006, 0.0003, 0, -0.0004, -0.0009, -0.0014, -0.0019, -0.0025, -0.0031, -0.0037, -0.0042, -0.0046, -0.005, -0.0052, -0.0052, -0.005, -0.0046, -0.0039, -0.0029, -0.0016, 0, 0.0019, 0.0041, 0.0066, 0.0092, 0.012, 0.0148, 0.0175, 0.02, 0.0221, 0.0237, 0.0247, 0.0248, 0.0239, 0.0219, 0.0186, 0.0139, 0.0077, 0, -0.0091, -0.0196, -0.0313, -0.0438, -0.0569, -0.0702, -0.0831, -0.0949, -0.1051, -0.1129, -0.1175, -0.1181, -0.1139, -0.1042, -0.0884, -0.0659, -0.0365, 0, 0.0434, 0.0932, 0.1487, 0.2084, 0.2708, 0.3339, 0.3951, 0.4515, 0.5, 0.5485, 0.6049, 0.6661, 0.7292, 0.7916, 0.8513, 0.9068, 0.9566, 1, 1.0365, 1.0659, 1.0884, 1.1042, 1.1139, 1.1181, 1.1175, 1.1129, 1.1051, 1.0949, 1.0831, 1.0702, 1.0569, 1.0438, 1.0313, 1.0196, 1.0091, 1, 0.9923, 0.9861, 0.9814, 0.9781, 0.9761, 0.9752, 0.9753, 0.9763, 0.9779, 0.98, 0.9825, 0.9852, 0.988, 0.9908, 0.9934, 0.9959, 0.9981, 1, 1.0016, 1.0029, 1.0039, 1.0046, 1.005, 1.0052, 1.0052, 1.005, 1.0046, 1.0042, 1.0037, 1.0031, 1.0025, 1.0019, 1.0014, 1.0009, 1.0004, 1, 0.9997, 0.9994, 0.9992, 0.999, 0.9989, 0.9989, 0.9989, 0.999, 0.999, 0.9991, 0.9992, 0.9993, 0.9995, 0.9996, 0.9997, 0.9998, 1)', fill: 'both' });
vawe
import { easeInOutElastic } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

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

When to use it, and when to avoid it

Use it for

  • A toy-like transition on one object.

Avoid it for

  • Everything with more than one moving part: the ringing at both ends doubles the noise.

The nearest vawe ease

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