Motion from zero: the second step starts where the first ended

A timeline is a list of steps. The second step should start at the value the first step reached. If both steps start at 0, the element jumps backward before it moves again. Store the steps as objects, and set the next fromX from the previous x.

The next step starts at the current value#

If both steps start at 0, the element jumps backward before the second move. The jump is not easing. It is a discontinuity. Store fromX equal to the previous step's x, and the second move continues from the pixel the first move reached. Each step can have its own duration. What it cannot have is a start that is not the current position. With reduced motion, every duration is 0 and the element finishes at the last x, which is 48.

1. first0 to 24
2. second24 to 48

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

The join is a shared number#

The first step travels from 0 to 24. The second travels from 24 to 48. 24 is written twice on purpose, so you can see that the end of one step is the start of the next. A builder can set that for you: after you push a step, the next fromX is that step's x. Writing it by hand in this lesson makes the join visible.

Each step still has its own durationMs. The second move does not have to take as long as the first. What it must not do is choose a fromX that is not the current position. The element would jump, and the jump is not an ease. It is a discontinuity.

One list, in order#

steps is the timeline. A player walks it from the start. Reducing motion sets every durationMs to 0 and the element finishes at the last x, which is 48. The objects stay the same shape you built in lesson 2. You added fromX so a step knows where it is coming from, not only where it is going.