Motion
Motion design enhances user experience and brings our brand to life. Our animations are purposeful, smooth, and delightful.
Animation Principles
Purposeful
Every animation should serve a purpose—providing feedback, guiding attention, or enhancing understanding. Avoid motion for motion's sake.
Smooth & Natural
Animations should feel natural and fluid. Use easing functions that mimic real-world physics for a more organic feel.
Accessible
Respect user preferences for reduced motion. Always provide alternatives and ensure animations don't cause discomfort.
Common Animations
Fade In
Use for content appearing on screen. Duration: 200-300ms.
Slide In
Use for modals and overlays. Duration: 250-350ms.
Timing & Easing
Micro-interactions
100-200ms - Button hovers, icon changes
UI Transitions
200-300ms - Page transitions, modal appearances
Content Animations
300-500ms - List items, card reveals
Use consistent timing across similar interactions. Faster animations feel snappier, while slower animations feel more deliberate.
Usage Guidelines
Do
- Use animations to provide feedback
- Keep animations subtle and purposeful
- Respect prefers-reduced-motion
- Test animations on various devices
Don't
- Animate everything just because you can
- Use jarring or distracting animations
- Create animations that cause motion sickness
- Ignore accessibility preferences