Motion
Motion is the language of change. It guides, delights, and elevates experiences. Well-crafted movement transforms experiences, making them intuitive, enjoyable, and memorable. It's not just about seeing, it's about feeling the journey.
Principles
Motion design principles are the guiding stars for creating purposeful and delightful movement. Our system is built on two key fundamental ideas: focus and fun. We believe motion should serve a clear purpose while adding a touch of joy to the user experience.
Focused
Motion draws attention to what's important, without creating unnecessary distraction.
Fun
Delightful motion adds personality to everyday actions and reflects the brand's personality.
Easings
Easings breathe life into our interactions. By carefully selecting and assigning relevant easing values to the different UI animations in our product, we create motion that feels natural and intuitive, enhancing the overall user experience.
| Tokens | Type | CSS | Usage |
|---|---|---|---|
| r.linear.easing | Linear Easing | Cubic-Bezier (0.00, 0.00, 0.00, 0.00) | Text Change |
| r.standard.easing | Standard Easing | Cubic-Bezier (0.35, 0.00, 0.10, 1.00) | Search Box Expand, Q&A Accordion |
| r.decelerated.easing | Decelerated Easing | Cubic-Bezier (0.10, 0.00, 0.00, 1.00) | Enter/Appear Transitions |
| r.accelerated.easing | Accelerated Easing | Cubic-Bezier (0.30, 0.00, 0.80, 0.15) | Exit/Disappear Transitions |
Decelerated Easing
Acelerated Easing
Standard Easing
Duration
Duration sets the pace of our animations. Precise timing ensures smooth and natural movement, creating a harmonious rhythm across the interface. Our duration values balances speed and subtlety for optimal user experience.
| Tokens | Time | Usage |
|---|---|---|
| r.duration.instant | 0 ms | Text change |
| r.duration.fast | 75 ms | Micro-interactions such as Checkboxes, Radio Buttons, Hover. |
| r.duration.fast2 | 100 ms | Micro-interactions such as Fade, Toggles, Tabs, Chips, Color. |
| r.duration.medium | 200 ms | Exit Transition, Dropdown menu, Accordion, Hover card expand |
| r.duration.medium2 | 300ms | Modals, Toast, Dialog, Notification |
| r.duration.slow | 400 ms | Enter Transition, Search Box Ring |
| r.duration.slow2 | 500 ms | Search Box Expand |
Animatable Properties
Our motion system is built on a foundation of core animatable properties: scale, fade, rotate, and move which shape how elements come to life and interact. These core actions are the foundation for every dynamic change, bringing our designs to life with purpose and grace.
Scale
Fade
Rotate
Move
Choreography
Transitions are the bridges between screens. Our system offers three distinct patterns, each choreographed to guide the user seamlessly. These carefully crafted movements elevate the overall experience, making every shift feel intentional and delightful.
Transition patterns
Top level
When tapping a navigation bar, rail or drawer, a quick fade is used to transition to a new destination.
Standard easing for fade with duration 200ms
Enter and exit
This transition is used for entering and exiting of side panels.
Decelerated easing for enter with duration 400ms
Accelerated easing for exit with duration 200ms
Skeleton Loader
Skeleton loaders are UI abstractions that hint at where content will appear once it's loaded. A pulsing animation indicates indeterminant loading and the content quickly fades in once it's loaded.
Decelerated easing for fade with duration 300ms
Accessibility
Motion in design can guide users and enhance the experience, but it's crucial to consider accessibility. Animations can trigger discomfort in users with vision issues, epilepsy, or vestibular disorders. To ensure safety, keep motion purposeful, clear, and avoidable through settings. This aligns with our goal of inclusive design, letting everyone benefit from our product.