Back to dashboard
DesignMasters11 m+140 XP
Motion & animation: when to use it and how to brief it
Animation principles, motion language, GSAP vs CSS, and the brief that gets the right result
Disney's 12 animation principles (squash & stretch, anticipation, staging, etc.) translate directly to UI animation. The most relevant: timing and spacing (faster = snappier, slower = premium), follow-through (elements slightly overshoot and settle), and staging (the eye should never have to hunt for what just changed). The golden rule: every animation should communicate something — state change, hierarchy, direction, or relationship. Animation for decoration is noise.
Key Points
- ▸Timing: 100-200ms for micro-interactions, 300-500ms for page transitions
- ▸Easing: ease-out for elements entering, ease-in for elements leaving
- ▸GSAP for complex sequences, CSS transitions for simple states
- ▸Always provide a reduced-motion alternative