Motion in digital products isn’t decoration. It’s communication. When done well, animation guides attention, provides feedback, and makes interfaces feel alive. When done poorly, it frustrates users and slows them down.
Here are the principles we follow.
Purpose Over Polish
Every animation should answer: why does this move? If you can’t articulate the purpose—feedback, orientation, delight—the motion probably shouldn’t exist.
Common purposes include:
- Feedback: Confirming an action was received
- Orientation: Showing where something came from or went
- Hierarchy: Drawing attention to what matters
- Continuity: Maintaining context during transitions
Duration Matters
Motion should be fast enough to feel responsive, slow enough to be perceived. Our defaults:
- Micro-interactions: 100-200ms (button states, toggles)
- Small transitions: 200-300ms (dropdowns, tooltips)
- Page transitions: 300-500ms (navigation, modals)
- Complex sequences: 500ms+ (onboarding, celebrations)
These aren’t rules—they’re starting points. Test with real users.
Easing Creates Personality
Linear motion feels robotic. Easing makes movement feel natural.
- Ease-out: Fast start, gentle stop. Good for entrances.
- Ease-in: Gentle start, fast end. Good for exits.
- Ease-in-out: Balanced. Good for moving objects.
We default to power2.out for most UI animation. It’s smooth without being sluggish.
Respect Preferences
Some users experience motion sickness or find animation distracting. Always respect prefers-reduced-motion. It’s not just accessibility—it’s respect.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Start Simple
You don’t need complex animation libraries to start. CSS transitions handle most UI motion. Graduate to GSAP or Framer Motion when you need sequencing, physics, or scroll-triggered effects.
Motion is a tool. Use it intentionally.