vaweGitHub

EasingClassic eases

easeInOutBack

It is slow at both ends and fast in the middle. It pulls back at the start and passes the end, then settles.

easeInOutBack reaches 50% of its travel at 50% of the time and 90% at 60%. Its peak speed is 5.59x the average. It passes the end value by up to 10.02%.

Classic easesfamily: backpeak 5.59x

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.

easeInOutBack
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
60%of the time
After 10% of time
-3.75%of the travel is done
Peak speed
5.59xtimes the average
Overshoot
10.02%past the end value
Undershoot
10.02%below the start value
linear() points
81at a 0.002 tolerance
cubic-bezier
closeworst gap 2.7 points

Copy the code

css linear() (exact)
animation-timing-function: linear(0, -0.0008, -0.003, -0.0065, -0.0112, -0.0168, -0.0231, -0.0301, -0.0375, -0.0452, -0.053, -0.0607, -0.0682, -0.0753, -0.0819, -0.0877, -0.0926, -0.0964, -0.0989, -0.1001, -0.0997, -0.0975, -0.0934, -0.0873, -0.0788, -0.068, -0.0545, -0.0384, -0.0192, 0.003, 0.0285, 0.0574, 0.0899, 0.1262, 0.1665, 0.2108, 0.2594, 0.3125, 0.3701, 0.4326, 0.5, 0.5674, 0.6299, 0.6875, 0.7406, 0.7892, 0.8335, 0.8738, 0.9101, 0.9426, 0.9715, 0.997, 1.0192, 1.0384, 1.0545, 1.068, 1.0788, 1.0873, 1.0934, 1.0975, 1.0997, 1.1001, 1.0989, 1.0964, 1.0926, 1.0877, 1.0819, 1.0753, 1.0682, 1.0607, 1.053, 1.0452, 1.0375, 1.0301, 1.0231, 1.0168, 1.0112, 1.0065, 1.003, 1.0008, 1);
cubic-bezier (nearest fit)
animation-timing-function: cubic-bezier(0.72, -0.55, 0.28, 1.55);

Least-squares fit to the easeInOutBack curve; the worst gap is 2.7 points of travel. It is close, not exact: use linear() when the end of the curve matters.

web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 600, easing: 'linear(0, -0.0008, -0.003, -0.0065, -0.0112, -0.0168, -0.0231, -0.0301, -0.0375, -0.0452, -0.053, -0.0607, -0.0682, -0.0753, -0.0819, -0.0877, -0.0926, -0.0964, -0.0989, -0.1001, -0.0997, -0.0975, -0.0934, -0.0873, -0.0788, -0.068, -0.0545, -0.0384, -0.0192, 0.003, 0.0285, 0.0574, 0.0899, 0.1262, 0.1665, 0.2108, 0.2594, 0.3125, 0.3701, 0.4326, 0.5, 0.5674, 0.6299, 0.6875, 0.7406, 0.7892, 0.8335, 0.8738, 0.9101, 0.9426, 0.9715, 0.997, 1.0192, 1.0384, 1.0545, 1.068, 1.0788, 1.0873, 1.0934, 1.0975, 1.0997, 1.1001, 1.0989, 1.0964, 1.0926, 1.0877, 1.0819, 1.0753, 1.0682, 1.0607, 1.053, 1.0452, 1.0375, 1.0301, 1.0231, 1.0168, 1.0112, 1.0065, 1.003, 1.0008, 1)', fill: 'both' });
vawe
import { easeInOutBack } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

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

When to use it, and when to avoid it

Use it for

  • A move with a wind-up and an overshoot: a mascot, a sticker, a toy-like object.

Avoid it for

  • Anything formal: the element moves backward at both ends.

The nearest vawe ease

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