Motion design
Designing how interfaces and graphics move to explain, guide and delight.
Motion design is the craft of planning how elements move: transitions between screens, feedback when something is tapped, loading states, scroll effects and animated illustrations. Good motion explains what just happened and where to look next.
In product and web work, motion is built with tools such as Rive, Lottie, CSS and JavaScript libraries like GSAP and Motion. It should respect people who prefer reduced motion, which operating systems expose as a setting websites can read.
Key characteristics
- Covers transitions, feedback, loading states and animated graphics.
- Explains change and directs attention, not only decoration.
- Built with tools such as Rive, Lottie, CSS, GSAP and Motion.
- Should honour the reduced-motion preference.
Example
When an item is added to a cart, it shrinks toward the cart icon and the count ticks up, so the shopper sees exactly what happened without reading a message.
Frequently asked questions
Is motion design only decoration?
No. The most useful motion explains state changes, shows relationships between screens and gives feedback. Decorative motion should be used sparingly.
How do I keep motion accessible?
Keep it short and purposeful, avoid flashing, and reduce or remove non-essential animation when the user has asked for reduced motion.
Related terms