Motion that explains: four rules we use on every site

How we keep interface animation useful: where it starts, how long it runs and when it stays still.

Animation is easy to add and hard to justify. These four rules are how we keep it honest. They fit on a card, and every project starts with them.

1. Motion starts where the hand is

A panel opens from the button that opened it. A card lifts under the cursor. When the origin matches the cause, nobody has to work out what happened.

2. Short for controls, slow for stories

A control that answers in more than a quarter of a second feels broken. A section arriving on scroll can take a full second, because the visitor is reading, not waiting.

3. One thing moves at a time

If everything animates, nothing is pointed at. We pick the one element that matters in a view and let the rest follow quietly behind it.

4. It works with motion turned off

Some people get sick from movement on screens, and their system tells the browser so. Every animation we ship has a calm version, and the content never depends on movement to be understood.

If everything animates, nothing is pointed at.

The rules sound restrictive. In practice they free up time: fewer debates about taste, more attention on the three or four moments that deserve it.