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.

Duration Feel Use Case

50-150ms Snappy Micro-interactions

150-300ms Responsive Button feedback

300-500ms Smooth Page transitions

500-800ms Deliberate Modal reveals

1000ms+ Dramatic Hero animations

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?