Motion Design
The use of animation and transitions in an interface to guide attention, explain change, and give a product a sense of life and quality.
Motion design applies animation with intent: a menu that slides in to show where it came from, a number that counts up to draw the eye, a loader that keeps a wait feeling short. Purposeful motion explains what changed and why, reducing the cognitive cost of a moving interface.
The line between delight and distraction is thin. Effective motion is fast, consistent, and respects reduced-motion preferences — it supports the interaction rather than showing off. Overused, animation slows people down and cheapens the product.
In practice
A list reorders after a user archives an item. Without motion, the row vanishes and users scan the screen wondering what happened. With a 200ms slide-and-collapse, the eye follows the change and no explanation is needed. That's the test for product motion: it should answer “what just changed?” faster than words. The craft details — durations under ~300ms, consistent easing, and honoring the user's reduced-motion setting — separate motion that helps from motion that shows off.
Learn more
Frequently Asked Questions
Related terms