Motion explains what changed
Useful motion preserves context. It shows where an object came from, where it went, and which action caused the transition. Decorative motion asks for attention without returning information.
Figure 01
Motion preserves a path
Intermediate states connect origin and destination, allowing the eye to maintain object continuity.
Source
Proteus study
Duration follows distance
Small state changes should resolve quickly. Large spatial transitions need enough time to remain legible. Consistency matters more than an arbitrary universal duration.
Exercise 01
Which transition teaches more?
Reveal the observation +
The moving panel. It preserves a visible relationship between the source card and the destination detail view; a dissolve only proves that time passed.
Chapter summary
Keep these
ideas close.
- 01Motion should explain continuity, cause, or hierarchy.
- 02Duration responds to distance and complexity.
- 03Reduced-motion alternatives preserve meaning without large movement.
Related topics
Keep exploring
References
Books
Designing Interface Animation
Val Head · A focused guide to purposeful product motion.
The Illusion of Life
Frank Thomas & Ollie Johnston · Foundational principles of readable movement.
Web & practice
Material Motion
A systematic model of transitions and hierarchy.
web.dev Animations
Performance and reduced-motion implementation guidance.
Field exercise
Record one product transition and annotate origin, destination, duration, and the information each intermediate frame provides.