vaweGitHub

EasingClassic eases

easeInBack

It starts slowly and ends fast. It pulls back below its start, then launches.

easeInBack reaches 50% of its travel at 87% of the time and 90% at 98%. Its peak speed is 4.7x the average. It dips 10% below the start value first.

Classic easesfamily: backpeak 4.7x

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.

easeInBack
linear

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

Numbers

50% of travel
87%of the time
90% of travel
98%of the time
After 10% of time
-1.43%of the travel is done
Peak speed
4.7xtimes the average
Overshoot
0%stays inside the end
Undershoot
10%below the start value
linear() points
41at a 0.002 tolerance
cubic-bezier
exactworst gap 0.4 points

Copy the code

css linear() (exact)
animation-timing-function: linear(0, -0.001, -0.0039, -0.0084, -0.0143, -0.0213, -0.0292, -0.0376, -0.0465, -0.0554, -0.0641, -0.0725, -0.0802, -0.087, -0.0926, -0.0968, -0.0994, -0.1, -0.0984, -0.0944, -0.0877, -0.0781, -0.0653, -0.049, -0.029, -0.0051, 0.023, 0.0556, 0.0929, 0.1351, 0.1826, 0.2355, 0.2942, 0.3588, 0.4297, 0.5071, 0.5912, 0.6823, 0.7806, 0.8864, 1);
cubic-bezier (matches within 0.5%)
animation-timing-function: cubic-bezier(0.33, 0, 0.67, -0.57);

Least-squares fit to the easeInBack 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.33, 0, 0.67, -0.57)', fill: 'both' });
vawe
import { easeInBack } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

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

When to use it, and when to avoid it

Use it for

  • An exit that winds up first: the element pulls back, then goes.
  • A button press or a throw, where the pull-back is the message.

Avoid it for

  • Entrances. The element first moves the wrong way and the viewer sees a glitch.
  • Opacity: a value below 0 is clamped, so the wind-up is lost.

The nearest vawe ease

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