The shape of a pause

Slide a book into place on a desk. Near the end, your hand slows. That small adjustment is easy to overlook until you watch a square cross a screen at constant speed and stop dead.

The destination is right. The arrival feels wrong.

Time is not distance

Let $t\in [\mathrm{0,1}]$ be the fraction of elapsed time, and $f(t)$ the fraction of distance travelled. With linear motion, $f(t)=t$: halfway through the time, the marker is halfway there.

A cubic ease-out curve covers the ground differently:

At $t=0.5$, equation gives $f(t)=0.875$. The marker has travelled 87.5% of the distance. It spends the second half of its time on the short stretch that remains.

Look at the last few moments

The derivative describes the pace along the way:

The curve begins quickly and slows to zero. A small response to a click may suit that quick start. A large title crossing the page may need a gentler departure as well.

The area under each position curve tells us something else:

Over this unit interval, the areas are also the average positions. The eased marker’s average is farther along the track: it gets close to the end early, then takes its time arriving.

Keep the path separate

The curve can supply a weight between two positions:

Apply it to each coordinate, and the same pace works along any straight path.

1
const easeOut = (t: number) => 1 - (1 - t) ** 3;
2

3
const position = (start: number, end: number, t: number) =>
4
  start + (end - start) * easeOut(t);

Distance still changes the feeling. A small nudge and a journey across half the screen cannot share a duration without moving at very different speeds. Judge the curve where it will be used, at the size it will appear.

Leave room for another input

The reader may click again before the marker arrives. Continue from its present position toward the new target. Jumping back to the start would break the very continuity the animation was meant to provide.

flowchart LR
  accTitle: Changing direction before arrival
  accDescr: Input sets a target. Movement continues from the current position and stops on arrival. New input can change the target along the way.
  A[Input] --> B[Set target]
  B --> C[Move from current position]
  C --> D[Draw the change]
  D --> E[Rest]
  C -->|New input| B

When the reader asks for less motion, remove the travel. When the picture stops changing, stop drawing. A pause should be allowed to remain a pause.