Universal Animation Principles

Apply all 12 Disney animation principles regardless of your tool or framework.

1. Squash and Stretch

Concept: Objects deform when moving, maintaining volume.

Implementation:

• •When compressing one axis, expand the other
• •scaleX * scaleY ≈ constant
• •Apply on impact, acceleration, or deceleration

Values: Compress to 80%, expand to 120%

2. Anticipation

Concept: Prepare the audience for an action.

Implementation:

• •Move opposite to the main action first
• •~20% of total duration for wind-up
• •Smaller anticipation for faster actions

Pattern: Wind-up → Action → Settle

3. Staging

Concept: Direct viewer attention to what matters.

Implementation:

• •Blur or fade background elements
• •Scale up the focal point
• •Use contrast (color, size, motion)
• •One clear action at a time

4. Straight Ahead / Pose to Pose

Straight Ahead: Animate frame-by-frame sequentially. Good for fluid, organic motion.

Pose to Pose: Define key poses, then fill in between. Good for precise, planned motion.

Recommendation: Use pose-to-pose for UI, straight ahead for particles/effects.

5. Follow Through and Overlapping Action

Concept: Different parts move at different rates.

Implementation:

• •Offset timing of child elements
• •Add 2-5 frame delay for secondary elements
• •Lighter/looser parts drag behind
• •Use easing with different curves per element

6. Slow In and Slow Out

Concept: Natural motion accelerates and decelerates.

Implementation:

• •Use ease-in-out for most movements
• •Ease-out for entrances (arrives gently)
• •Ease-in for exits (leaves naturally)
• •Linear only for mechanical motion

Common curve: cubic-bezier(0.42, 0, 0.58, 1)

7. Arc

Concept: Natural movement follows curved paths.

Implementation:

• •Avoid straight-line motion for organic elements
• •Use motion paths or multi-point keyframes
• •Parabolic arcs for thrown objects
• •Pendulum arcs for swings

8. Secondary Action

Concept: Supporting actions reinforce the main action.

Implementation:

• •Add subtle movements that complement primary
• •Examples: hair bounce, shadow movement, particle effects
• •Should not distract from main action
• •Slightly delayed from primary

9. Timing

Concept: Speed conveys weight, mood, and character.

10. Exaggeration

Concept: Push beyond realistic to enhance clarity.

Implementation:

• •Scale movements 20-50% beyond subtle
• •Overshoot then settle
• •More exaggeration = more cartoony
• •UI: subtle exaggeration (5-15% overshoot)

11. Solid Drawing

Concept: Maintain volume and weight in 3D space.

Implementation:

• •Consider all three dimensions
• •Maintain consistent perspective
• •Preserve volume during transformations
• •Use shadows to ground elements

12. Appeal

Concept: Make it pleasing and engaging.

Implementation:

• •Smooth curves over sharp angles
• •Consistent timing patterns
• •Clear visual feedback
• •Satisfying interaction responses
• •Balance between predictable and delightful

Universal Timing Reference

Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms

Universal Easing Reference

Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic

Checklist

Before shipping animation:

• • Does it have easing (not linear)?
• • Is timing appropriate for the action?
• • Does it follow arcs where natural?
• • Is there anticipation for significant actions?
• • Do secondary elements have slight delays?
• • Is the focal point clear?
• • Does it feel satisfying?