Design6 min read

Motion Design & Animation

Design purposeful UI animations - using CSS transitions, Framer Motion, and the 12 principles of animation to guide attention without overwhelming users.

Motion DesignAnimationCSS AnimationsFramer MotionUX

skill: Motion Design & Animation category: Design tags: [Motion Design, Animation, CSS Animations, Framer Motion, UX] readingTime: 6

Animation must serve UX, not decorate it. Every animation should guide attention, indicate state change, or provide spatial context. Gratuitous animation slows users down and increases cognitive load. Start with CSS transitions (native, performant), reach for Framer Motion only when you need physics, gestures, or layout animations.

Workflow

Use CSS transitions for simple state changesCSS transitions are hardware-accelerated and zero-dependency - perfect for hover states, focus indicators, and show/hide transitions.
Write CSS keyframe animationsKeyframes handle complex multi-step animations - skeleton loaders, spin indicators, and entrance effects.
Add physics-based animation with Framer MotionSpring physics feel more natural than easing curves - the animation responds to interruption and velocity like a physical object.
Animate layout changesLayout animations smooth the re-ordering of list items, adding/removing elements, and shared element transitions - without calculating positions manually.
Respect prefers-reduced-motionVestibular disorders and migraines make motion physically painful for some users. Respecting their OS setting is an accessibility requirement.

Output Format

Purposeful UI animations: CSS transitions for hover, keyframes for loaders, Framer Motion for complex interactions, reduced-motion fallbacks.

Animation rules:
  Duration: 100-200ms (micro), 200-400ms (transitions), 400-600ms (complex)
  Easing: ease-out for entrances, ease-in for exits
  Properties: only opacity + transform (no width/height)
  Reduced motion: always provide a no-animation alternative

Examples

Input

Output

Edge Cases & Gotchas

Animation jank from JS thread - JavaScript on the main thread blocks animation frames. Keep animation work in CSS transforms/opacity (compositor thread) or use will-change: transform on animated elements.
AnimatePresence exit animations - In Framer Motion, an exiting element must be wrapped in AnimatePresence and have an exit prop - without these, exit animations don't play.
Infinite animation battery drain - Infinite CSS animations (shimmer, spin) drain mobile battery. Pause with animation-play-state: paused when the element isn't visible using IntersectionObserver.
Font loading causing FOUT - Text reflow from font swapping causes layout shifts. Use font-display: optional or preload the font to eliminate FOUT.

When to Break These Rules

Don't animate for the sake of it - the best animation is one the user doesn't consciously notice but that makes the interaction feel smooth.
Use Lottie (Airbnb) for complex illustrative animations - it plays After Effects animations in the browser without coding each frame by hand.

Reference Files

https://www.framer.com/motion/
https://web.dev/animations-guide/