Motion

A duration is a number of milliseconds. A distance is a number of pixels. 320 and 24 slide a price label. The program prints 320 and 24.

const duration = 320;
const distance = 24;
console.log(duration, distance);

320 24

One object holds the slide of a price label: the duration, the distance, and the opacity. The program builds one and prints 320, 24, and 1.

Builds on lesson 1.

const move = {
  durationMs: 320,
  x: 24,
  opacity: 1,
};
console.log(move.durationMs, move.x, move.opacity);

320 24 1

Changing width makes the browser lay the page out again. Changing a transform does not. The price label moves with translateX(24px). Its width stays.

Builds on lessons 1 through 2.

const distance = 24;
const transform = "translateX(" + distance + "px)";
console.log(transform);

translateX(24px)

Easing maps a time from 0 to 1 onto a progress from 0 to 1. easeOut is slow at the end. The program prints 0, 0.75, and 1.

Builds on lessons 1 through 3.

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

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

0 0.75 1

Some readers ask the system for less motion. Honor it by using a duration of 0. The program prints 320 for a normal run and 0 when motion is reduced.

Builds on lessons 1 through 4.

function duration(reduce) {
  return reduce ? 0 : 320;
}

console.log(duration(false), duration(true));

320 0

Two steps share one object. The second step's fromX is the first step's x. The program prints 0 then 24, then 24 then 48.

Builds on lessons 1 through 5.

const steps = [
  { fromX: 0, x: 24, durationMs: 320 },
  { fromX: 24, x: 48, durationMs: 320 },
];

for (const step of steps) {
  console.log(step.fromX, step.x);
}

0 24
24 48