Universal Animation Principles
Apply Disney's 12 principles as flexible foundations that adapt to any industry context with sensible defaults.
The 12 Principles Applied
1. Squash & Stretch
- Default: Subtle compression on interactive elements
- Adjust By: Brand personality (playful = more, serious = less)
- Universal Rule: Never distort data or important content
2. Anticipation
- Default: Brief pause before significant actions
- Adjust By: Action importance (bigger action = more anticipation)
- Universal Rule: Always signal before irreversible actions
3. Staging
- Default: Primary action takes visual focus
- Adjust By: Content hierarchy and user goals
- Universal Rule: One main focus per screen state
4. Straight Ahead & Pose to Pose
- Default: Pose to pose for UI, straight ahead for data
- Adjust By: Content type and interaction pattern
- Universal Rule: Match approach to content predictability
5. Follow Through & Overlapping Action
- Default: Related elements animate in sequence
- Adjust By: Visual complexity and element relationships
- Universal Rule: Primary element completes before secondary
6. Slow In & Slow Out
- Default: ease-in-out for most transitions
- Adjust By: UI context (entrances = ease-out, exits = ease-in)
- Universal Rule: Never use linear for UI motion
7. Arc
- Default: Subtle curves for natural movement
- Adjust By: Interface formality (casual = more arc)
- Universal Rule: Straight lines for data, curves for character
8. Secondary Action
- Default: One supporting animation per primary action
- Adjust By: Moment importance and brand expression
- Universal Rule: Secondary never overshadows primary
9. Timing
- Default: 200-300ms for standard interactions
- Adjust By: Industry pace and user expectations
- Universal Rule: Faster for frequent, slower for significant
10. Exaggeration
- Default: Subtle, 10-20% beyond literal
- Adjust By: Brand personality and context appropriateness
- Universal Rule: Exaggerate successes, minimize failures
11. Solid Drawing
- Default: Consistent visual language throughout
- Adjust By: Platform conventions and brand guidelines
- Universal Rule: Maintain perspective and proportions
12. Appeal
- Default: Clean, refined motion that feels intentional
- Adjust By: Target audience and brand personality
- Universal Rule: Animation should never feel accidental
Universal Timing Defaults
| Action | Duration | Easing |
|---|
| Micro-interaction | 100-150ms | ease-out |
| Standard Transition | 200-300ms | ease-in-out |
| Complex Animation | 300-500ms | ease-in-out |
| Emphasis Moment | 400-600ms | custom |
| Page Transition | 300-400ms | ease-in-out |
Adaptation Framework
By Brand Personality
- Professional: Reduce squash/stretch, minimize exaggeration
- Playful: Increase bounce, add secondary actions
- Premium: Slower timing, refined easing curves
- Energetic: Faster timing, more dynamic motion
By User Context
- Working: Minimize animation, maximize efficiency
- Browsing: Enhance discovery with motion
- Celebrating: Amplify positive moments
- Learning: Support comprehension with motion
Key Principle
Start with sensible defaults, then calibrate based on industry expectations, brand personality, and user context. When in doubt, err toward subtlety and efficiency.