By Cairo Studio, Studio 6 min read
Most interfaces move too much. Things slide, bounce and fade for no reason anyone could defend, as if motion were seasoning you add until the dish looks expensive. We think of it differently. Motion is grammar. It tells people how parts of a page relate, and a page full of exclamation marks says nothing.
Motion is punctuation
A transition says this came from that. A panel that grows out of the button you tapped is linked to its cause. A panel that simply appears is not. When motion describes a real relationship, like origin, order or continuity, it makes a page easier to follow. When it is only pretty, it makes the page harder.
So we ask every animation the question we ask a comma: what does this make clearer? If the honest answer is nothing, it comes out.
Easing is tone of voice
Two transitions with the same duration can feel completely different because of their easing curve. A sharp ease out feels quick and sure. A long soft ease feels calm. A linear move feels like a machine. We tune curves the way you tune a sentence, by trying them again and again until the rhythm is right.
Our working rules
- Arrive quickly, leave slowly.
- Animate transform and opacity, almost never layout.
- Hover changes colour, not size or position.
- Treat reduced motion as a full state of the design.
- If you notice the animation, it is probably too long.
The case for stillness
The most underrated move in motion design is no motion. Stillness gives the eye somewhere to rest and makes the few things that do move important. A calm interface that animates with restraint feels faster and more trustworthy than one that is always gently moving, even when the load times are the same.
We treat motion like a budget. Spend it on the moments that carry meaning, like a state change, a confirmation or a hand off between screens, and save the rest. Good motion does its work without being watched, and then gets out of the way.
