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.