Motion Design Guide
Duration Guidelines
| Duration | Use Case |
|---|---|
| 50–100ms | Micro-interactions: hover states, button press, toggle |
| 100–200ms | UI feedback: checkbox, tooltip appear, menu item highlight |
| 200–300ms | Simple transitions: dropdown open, card flip, expand |
| 300–500ms | Page elements: modal open, sidebar slide, hero animation |
| 500–1000ms | Complex transitions: page transition, onboarding step |
| >1000ms | Loading states, storytelling animations only |
Easing Functions (hover rows to demo)
ease (default)
Slow start, fast middle, slow end
ease-in
Slow start (exit animations)
ease-out
Slow end (enter animations)
ease-in-out
Smooth both ends (modal, drawer)
linear
Constant speed (loaders, spinners)
CSS Animation Reference
/* Fade in from bottom */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
animation: fadeInUp 300ms ease-out both;
}
/* Smooth entrance for modals */
.modal {
animation: scaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* Skeleton loading shimmer */
@keyframes shimmer {
to { background-position: 200% center; }
}
.skeleton {
background: linear-gradient(90deg, #1c2035 25%, #2a2f4a 50%, #1c2035 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
Motion Design Principles
- ✅ Purposeful — Every animation should communicate something, not just decorate
- ✅ Responsive — Animations should respond instantly to input (<100ms)
- ✅ Natural — Use ease-out for entering elements (deceleration feels natural)
- ✅ Consistent — Same motion system across the entire product
- ❌ Don't animate everything — use motion sparingly to preserve meaning
- ❌ Respect prefers-reduced-motion media query for accessibility