Craft
Write a motion contract before you animate anything
· 6 min read
Three durations, three easings, written down before the first transition. Everything else is decoration.
Interface motion goes wrong in a predictable way. A designer adds a nice transition, someone else adds another, and six months later the product has forty timing values and no explanation for any of them.
The fix is unglamorous: decide the contract first. We use three durations — 180ms for a state change, 320ms for a position change, 520ms when the whole context changes — and two easings. If a transition does not fit, the interaction is wrong, not the timing.
The second rule is that motion must explain origin. If a panel appears, it comes from the thing that opened it. If it just fades in, the user has to rebuild the mental model themselves, and fading is what we use when we have not decided.
Finally, every value has a reduced-motion equivalent decided at the same time, not retrofitted. `prefers-reduced-motion` is not an accessibility checkbox at the end of the project; it is a second design of the same interaction.