How to use motion
These are 12 motion principles that help create usability on screens.
1. Easing ensures smooth transitions between states by controlling the acceleration and deceleration of motion. It prevents abrupt starts and stops, creating a more natural and pleasing user experience.
2. Offset & Delay introduces variation in timing for multiple animations, preventing them from occurring simultaneously. It adds depth and complexity to motion design, allowing designers to create dynamic and engaging sequences.
3. Parenting establishes hierarchical relationships between animated objects, allowing one object to control the motion of another. It simplifies animation workflows and ensures consistency across related elements.
4. Transformation involves changing an object's properties over time, such as its position, size or opacity. It communicates transitions between states and reinforces user interactions. Transformation adds clarity and context to motion design.
5. Value change alters numerical properties of objects, such as colour or brightness, to convey information or feedback. It enhances visual communication and reinforces user actions. Value Change provides immediate feedback and improves user comprehension.
6. Masking involves revealing or concealing parts of an object to create dynamic effects. It guides users' focus and attention, highlighting important content or interactions. Masking adds depth and dimensionality to UI elements.
7. Overlay creates spatial relationships between layered objects, allowing users to navigate complex interfaces more intuitively. It provides context and hierarchy within the visual layout, improving usability and comprehension.
8. Cloning generates new objects from existing ones, narratively accounting for their appearance and departure. It creates a clear chain of events and reinforces user actions. Cloning supports continuity and relationship building within the interface.
9. Obscuration hides an object to orient users towards a more important object. It communicates additional contextual information, improving user awareness and compensating for limited visual space.
10. Parallax creates spatial hierarchy through the differential motion of interface elements during scrolling. It separates immediate content from ambient elements, improving visual clarity and user focus.
11. Dimensionality provides spatial narrative frameworks for object origin and departure. It overcomes the limitations of flat design, reinforcing mental models and spatial awareness.
12. Dolly & Zoom smoothly transitions between interface objects and spaces, preserving continuity and spatial narrative. It enhances user navigation and comprehension, improving the fluidity and coherence of the interface.
These principles can be used in isolation but quite often they’re used in combination to create meaning. Here is an example of 5 of the principles being used at the same time – parallax, masking, parenting, offset & delay and dolly & zoom: