01 Motion is information 01 Motion is information 01 Motion is information 01 Motion is information

When something on screen changes, the change is a fact: a menu opened, a message arrived, an item moved. Motion is how that fact is delivered. Without it, every change is a cut. One frame (a single still image; the screen draws dozens of them every second) shows the menu closed, the next shows it open, and your eye has to work out what changed, where, and why.

Motion does that work for the eye. It is information first and decoration second. This chapter names what that information can be, so that from chapter 2 on you can ask how to say it well.

Every chapter follows the same path. You see an example, feel the difference between two versions, read the ideas behind it, tune one thing in a lab instrument, read the code that writes it, and finish with a drill that trains your eye. Play everything: the figures are there to be touched, not just read. Each one tells you what to try and what to look for.

Five things motion says

A specimen is a small piece of interface that plays one change. Hover or click each to play it, and for each ask what you learned from the movement alone, before reading the label. The five differ only in the message the motion carries.

• Causality. The menu grows out of the button. You don’t need to be told which press opened it.
• Continuity. The item travels from one list to the other. It is the same thing in a new place, not something that vanished while something else appeared.
• Attention. A count pops onto the bell. The eye goes where things move, so motion is a way of pointing.
• Feedback. The heart squashes when tapped. The system heard you.
• State. The knob slides and the track fills. The setting is now on, and you saw it become on.

What did you lose?

Watch the same change with motion and without it. Then ask yourself what the second version made you do.

Motion spends attention

The eye can’t ignore movement. That is why motion works as a pointer, and why it has a cost. Every moving thing makes a claim on your attention. Two things moving at once make two claims, and the eye has to choose.

So motion should say one thing at a time, and only things worth saying. A card sliding in says “new content, here”. A background that drifts forever says nothing, but it keeps asking to be looked at. This app follows that rule: the page is still unless something is happening, so that when something moves, it means something.

A useful test for any animation: name what it says. If you can’t name it in one word from the five above, it is probably decoration.

Watch it frame by frame

This is your first lab instrument, the Frame stepper. The lab is a set of such tools, each built to isolate one part of motion; the code beside each one is live, so edit it and watch. A frame is one still image, and the screen shows a new one many times a second. Here a toast (a small message that slides in) arrives from below. Play it at 0.1×, a tenth of normal speed, or click the scrubber and step through with the arrow keys. Find the first frame where you can tell where it came from. That frame is where the information starts.

The direction reads within the first three or four frames (at 60 frames a second, about 50 to 65ms), by which point the toast has covered well over half its distance. After that the motion is only settling. So a good entrance puts most of its movement at the start: the direction is delivered early, and the rest is the object coming to rest.

The notation

There is no special code for “information”. It lives in three choices: how long the motion takes, how the object is spread across its frames (the curve, such as the cubic-bezier(...) you have seen twice now), and where it starts. Chapter 2 starts with how long, and chapter 3 opens up the curve. For now, here are two small patterns: a state that shows it changed, and a press that answers. Read the comments, but don’t worry about why each number was chosen yet. Those choices are explained over the next three chapters.

.switch .knob {
  transform: translateX(0);
  /* When `transform` changes, take 180ms to get there, using this curve. */
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}

/* When the switch turns on, the knob's target moves 22px right (however far your switch's track needs).
   You write only the two end states; the browser draws every frame between them. */
.switch[aria-checked="true"] .knob {
  transform: translateX(22px);
}

// Feedback: the button acknowledges the press at once, and lets go on release.
// Start from wherever the button is now, so a quick release never jumps.
// scale(0.96) shrinks the button to 96% of its size: enough to feel, too little to look broken.
const press = (scale) => {
  const from = getComputedStyle(button).transform; // the button's current transform, mid-motion or not
  // element.animate(keyframes, options) is the Web Animations API: a list of
  // keyframes to pass through, and how long (ms) and with what curve.
  button.animate(
    [{ transform: from }, { transform: `scale(${scale})` }],
    // fill: 'forwards' keeps the last keyframe after the animation ends, so it doesn't snap back
    { duration: 90, easing: 'ease-out', fill: 'forwards' },
  );
};

button.addEventListener('pointerdown', () => press(0.96));
button.addEventListener('pointerup', () => press(1));
button.addEventListener('pointerleave', () => press(1));

Name what it says

Five small UI clips. For each, name which of the five messages its motion carries: causality, continuity, attention, feedback or state. Once you can read what a motion says, the next question is how long it should take to say it.