Motion
Animation guidelines that bring our interfaces to life while maintaining usability and performance.
Motion Principles
Motion should feel purposeful and natural. Every animation serves a function: guiding attention, providing feedback, or creating continuity.
Purposeful
Every animation has a reason. Motion guides users through tasks and provides meaningful feedback.
Natural
Animations follow physics-based easing. Objects accelerate and decelerate like real-world objects.
Quick
Animations are fast enough to not impede workflow. Users should never wait for animations.
Accessible
Respect reduced motion preferences. Essential information is never conveyed through motion alone.
Easing Curves
Different easing curves serve different purposes. Choose based on the type of motion.
Snappy
cubic-bezier(0.2, 0, 0, 1) Quick response, smooth finish. For button hovers, quick interactions.
Smooth
cubic-bezier(0.4, 0, 0.2, 1) Gentle acceleration and deceleration. For page transitions, modals.
Bounce
cubic-bezier(0.34, 1.56, 0.64, 1) Slight overshoot for playful feel. For success states, attention-grabbing animations.
Stroke Draw
cubic-bezier(0.65, 0, 0.35, 1) Optimized for SVG path animations. For icon reveals, decorative elements.
Duration Scale
Common Patterns
Button Hover
150ms snappy Fade In
300ms smooth Slide Up
300ms enter Scale
200ms bounce Reduced Motion
Always respect the prefers-reduced-motion media query.
Users who prefer reduced motion should still have a functional experience.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}