The Animation Principles for Interfaces

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

slow in and slow out

Starting and ending a move gently. In CSS this is easing.

anticipation

A small move the other way before the main move, so the eye expects it.

follow-through

Motion that carries on a little past the end and settles back.

squash and stretch

A small change of proportion that makes a shape feel like a material.

arc

A curved path. Real things rarely move in straight lines.

staging

Directing attention to one thing, for example by dimming everything else.

1. 1

   Measure the arc

   In "An arc without a path", press Throw and step to 175, 350 and 525 ms. The straight ball is at y = -14, -28, -42: even steps. The arc ball's y is -75, -110, -93: fast up, a stop at the top, then down. Its x is the same even 67, 135, 202 px as the straight ball's.

2. 2

   Step through the wind-up

   Press Delete and step to 78 ms: the row is about 4 px to the right (the anticipation). At 156 ms it is 71 px to the left and about half transparent. At 260 ms it is back to normal, because the animation does not remove the row.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: motion at constant speed on straight lines looks mechanical, and people say an interface "feels cheap" without knowing why. The principles are a vocabulary for what is missing. They were written down by the Disney animators Ollie Johnston and Frank Thomas in *The Illusion of Life* (1981).

2. 2

   Slow in and slow out. Real things speed up and slow down. At a constant speed an element starts and stops abruptly. In the browser this is easing, which Phase 5 covers in depth. For product UI it is the one principle you use on everything.

3. 3

   Anticipation and follow-through. Anticipation is a small move the opposite way before the main move, so the eye knows what is coming: the Delete row steps 6 px right, then leaves left. Follow-through is the settling after: a new row arrives 3 px past its place and returns. Keep both tiny and fast. Lumen's own choice (not a standard): a wind-up of about 6 px in the first 80 ms.

4. 4

   Squash and stretch. A shape that changes proportion a little feels like a material, not a rectangle. For interfaces Lumen keeps it to about 15% or less (its own choice) and uses it only on solid shapes such as a badge or a pill, never on text, which looks distorted.

5. 5

   Arcs. Thrown things travel on curves, and straight lines look robotic. You can make an arc without a path: let x move at an even pace while y goes up slowing down and falls speeding up, as the Throw example does. Use arcs for things that fly, such as an item to the cart.

6. 6

   Staging and timing. Staging directs the eye to one thing: a dialog opens, and the page behind dims and steps back. One thing should move at a time. Timing is the duration, and it carries meaning: a small confirmation is quick, a big movement is slower (Topic 2.4).

7. 7

   Which fit where. Product UI (frequent, quiet): slow in and out and timing always, staging for dialogs, small follow-through and arcs for flying items, anticipation and squash rarely. Marketing and storytelling pages (people came to look): all of them, bolder, but still with a calm version for reduced motion.

• You can name the seven principles and the CSS idea behind slow in and out

• You can make an arc from two eased axes

• You know which principles fit product UI and which belong on marketing pages

• You can describe the reduced-motion version of each