tomevault-io 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.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.