🇺🇸English

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

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.

Weekly Installs

49

Repository

dylantarre/anim…inciples

GitHub Stars

22

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex43

gemini-cli40

opencode40

cursor39

github-copilot37

claude-code35