Motion Design
The design of movement in an interface — transitions, feedback and animation — used to explain change rather than to decorate it.
Design DisciplinesMotion answers three questions the eye asks during a change: what moved, where did it come from, and is the system still working. A panel that slides from the edge it will return to is easier to understand than one that fades; a progress indicator that reflects real stages is more reassuring than a looping spinner. Duration and easing carry meaning, and both belong in design tokens so they stay consistent.
The failure mode is motion applied as polish. Animation on every element makes an interface feel slow because each transition adds latency the user cannot skip, and long easing on frequent actions is actively irritating. The working rule is short for frequent, longer for rare, and always respect `prefers-reduced-motion` — for some users animation is a vestibular problem, not a preference.
In practice
A marketing site animated every section on scroll with a 900ms ease. Before: users scrolling quickly saw half-faded content and bounce was high on mobile. After cutting to 250ms, animating once, and disabling under reduced-motion, mobile bounce fell noticeably. The catch — the slower version had been signed off precisely because it looked impressive in a demo.
Learn more
You may ask
Frequently Asked Questions
How long should an interface animation be?
Roughly 150–250ms for frequent, small changes such as hovers and toggles, and 300–500ms for larger, rarer ones like a full-screen transition. Anything past half a second on a repeated action starts reading as lag.
Does motion hurt performance or accessibility?
It can do both. Animating layout properties instead of transform and opacity causes jank, and unrestrained motion triggers nausea for users with vestibular disorders. Honouring `prefers-reduced-motion` is the baseline requirement.
Related terms
All terms- Interaction DesignThe design of how an interface behaves — what responds to what, in what order, with what feedback, and what happens when something goes wrong.
- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Visual DesignThe craft of composition, colour, typography and imagery — how an interface or asset looks, and what that appearance communicates.
- Brand IdentityThe system of names, marks, type, colour and voice that makes a company recognisable and consistent everywhere it appears.
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us