Universal Animation Principles

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

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