Motion that explains, not motion that performs

If you can’t say what an animation teaches the visitor, cut it. I keep three kinds of motion and delete the rest.

Motion that shows structure

When a grid rearranges into a stack, the visitor learns that the two are the same content. Fieldnote’s exploded headphones taught people that every part can be replaced, faster than any paragraph.

Motion that confirms

A button that presses, a form that says thank you, a copied email that says copied. Small, quick, and always there.

Motion that slows you down

Occasionally a page should take its time: a hotel, a gallery, a winery. Slow reveals there are part of the tone. Everywhere else, get out of the way.