Motion from zero: easing is a function of time

Linear motion moves the same distance on every tick. Most motion on a page should arrive more gently than it leaves. An easing function takes t, a number from 0 at the start to 1 at the end, and returns how far along the change should be. easeOut covers more of the distance early and less of it late.

Easing maps time to distance#

t is elapsed time divided by the duration, clamped to the range 0 through 1. An easing function maps that to a progress in the same range. easeOut here is 1 - (1 - t) * (1 - t). The ends matter: 0 stays 0 and 1 stays 1, or the element never quite arrives. At t of 0.5 the progress is 0.75, so a 24 pixel move has covered 18 pixels and the rest of the time settles the last 6. The function does not know about milliseconds. The player supplies t.

1. t = 00
2. t = 0.50.75
3. t = 11

function easeOut(t) {
  return 1 - (1 - t) * (1 - t);
}

console.log(easeOut(0), easeOut(0.5), easeOut(1));

0 0.75 1

The ends stay put#

easeOut(0) is 0. The animation has not started, so the progress is 0. easeOut(1) is 1. It has finished, so the progress is the whole way. Those two results matter. An easing that does not return 0 and 1 at the ends leaves the element short of the target, or past it.

easeOut(0.5) is 0.75. Halfway through the time, three quarters of the distance is done. The rest of the time covers the last quarter, which is why it feels like it settles. The position on screen is distance * easeOut(t). At t of 0.5 and a distance of 24, that is 18 pixels.

Pass t, not the clock#

The function does not know about milliseconds. The player divides elapsed time by durationMs and clamps the result to the range 0 through 1. That quotient is t. Keeping easing free of the clock means you can test it with three numbers, as this program does. The next lesson is the duration you pass in when the reader asked the system for less motion.