Our motion system brings interfaces to life through purposeful, informative animations that guide users and create a more engaging experience.
Core principles that guide our approach to motion
Motion should serve a purpose, whether it's guiding attention, showing relationships, or providing feedback.
Animations should feel natural and follow the laws of physics, with appropriate easing, momentum, and weight.
Motion should enhance the experience without calling attention to itself or becoming distracting.
Similar actions should have similar animations, creating a predictable and cohesive experience.
Standard timing and easing functions
Most transitions
Elements entering the screen
Elements exiting the screen
Attention-grabbing animations
Standardized animations for common interactions
Use for appearing/disappearing elements, modals, tooltips
Use for emphasis, buttons, interactive elements
Use for navigation, transitions between screens
Ensuring motion is accessible to all users
Always respect the user's motion preferences by checking for the prefers-reduced-motion media query and providing alternative animations or static transitions.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Don't rely solely on animation to convey information. Always provide alternative cues such as color changes, text labels, or icons.
How to implement motion in your interfaces
Use CSS transitions for simple state changes:
.button {
background-color: var(--primary);
transition: background-color 200ms var(--ease-standard);
}
.button:hover {
background-color: var(--primary-dark);
}Use CSS animations for repeating or complex animations:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 300ms var(--ease-enter) forwards;
}