Motion & Animation
Our motion and animation guidelines define how elements move within our interfaces. Thoughtful animation enhances the user experience by providing feedback, guiding attention, and creating a more engaging interface.
Core Principles
Purposeful
Animation should serve a purpose and enhance the user experience, not distract from it.
Responsive
Animations should provide immediate feedback to user actions, creating a sense of responsiveness.
Consistent
Similar elements should animate in similar ways to create a cohesive experience.
Subtle
Animations should be noticeable but not overwhelming, enhancing rather than dominating the interface.
When to Use Animation
- • Transitions: When moving between states or pages
- • Feedback: To confirm an action has been received
- • Guidance: To direct attention to important elements
- • Hierarchy: To establish relationships between elements
- • Delight: To create moments of joy in the user experience
- • Loading: To indicate that content is being processed