I've cut more animations than I've shipped. Not because they were ugly — most of them were lovely — but because they had nothing to say. That's my whole take on product motion: it's a language. It tells people where things came from, where they went, and what just changed. If a transition can't answer one of those questions, it's noise wearing a nice easing curve. Cut it.
01 Grammar first, vocabulary later
My motion system starts with three rules, not three animations. Continuity: things that survive a state change should travel, not teleport. Hierarchy: the bigger the change, the more motion it earns. Causality: whatever you touched moves first, everything else follows. Every animation I ship has to be sponsored by one of those rules. No sponsor, no ship.
Yes, it's restrictive. That's the point! When everything moves, nothing means anything. When only meaningful things move, people learn the language without ever noticing there was one.
02 Tokens for time
Duration and easing are tokens in my world, same as colour and spacing. Three durations — 150ms for feedback, 350ms for transitions, 650ms for full scene changes — and two curves: a soft ease-out for entrances, a sharper one for exits. That's the entire vocabulary, and it covers 95% of an interface. The other 5% is where the fun lives, but you have to earn it.
The real payoff is when the whole team speaks it. A designer writes 'card enters, base/out' in a ticket and the engineer knows exactly what to build. Motion review stops being 'hmm, can it feel smoother?' and becomes an actual conversation with shared words. I've watched this save entire afternoons.
03 And an off switch
A motion language needs a silent mode. prefers-reduced-motion isn't an edge case — it's a contract. The token approach makes honouring it nearly free: one media query collapses the durations and swaps travel for crossfades. People who need stillness get the full experience, not the broken one.