dylantarre/animation-principles

# 3D Spatial Animation

Apply Disney's 12 animation principles to 3D software, VR/AR, and spatial computing environments.

## Quick Reference

| Principle | 3D/Spatial Implementation |
|-----------|--------------------------|
| Squash & Stretch | Lattice deformers, blend shapes |
| Anticipation | IK/FK wind-ups, camera pre-motion |
| Staging | Camera angles, lighting, depth |
| Straight Ahead / Pose to Pose | Layered animation vs blocking |
| Follow Through / Overlapping | Bone chains, physics simulation |
| Slow In / Slow Out | F-curve editing, animation curves |

# Accessible Motion Design

Apply Disney's 12 animation principles while ensuring accessibility for users with vestibular disorders, motion sensitivity, and cognitive disabilities.

## Quick Reference

| Principle | Accessible Implementation |
|-----------|--------------------------|
| Squash & Stretch | Opacity/color change instead |
| Anticipation | State change indication without motion |
| Staging | Focus management, not motion-based |
| Straight Ahead / Pose to Pose | Instant state changes |
| Follow Through / Overlapping | Eliminated or minimal fade |
| Slow In / Slow Out | Instant or very gentle ease |

# Brand Marketing Animation

Apply Disney's 12 animation principles to commercials, advertisements, brand identity, and marketing content.

## Quick Reference

| Principle | Brand/Marketing Implementation |
|-----------|-------------------------------|
| Squash & Stretch | Product bounce, logo elasticity |
| Anticipation | Build-up to reveal, suspense |
| Staging | Product hero shots, focal control |
| Straight Ahead / Pose to Pose | Story flow vs key moments |
| Follow Through / Overlapping | Logo elements settle, tagline delay |
| Slow In / Slow Out | Dramatic reveals, smooth motion |

# Data Visualization Animation

Apply Disney's 12 animation principles to charts, graphs, dashboards, and information displays.

## Quick Reference

| Principle | Data Viz Implementation |
|-----------|------------------------|
| Squash & Stretch | Bar overshoot, elastic settling |
| Anticipation | Brief pause before data loads |
| Staging | Sequential reveal, focus hierarchy |
| Straight Ahead / Pose to Pose | Streaming vs snapshot data |
| Follow Through / Overlapping | Staggered element entry |
| Slow In / Slow Out | Smooth value interpolation |

# Game Development Animation

Apply Disney's 12 animation principles to game engines, player feedback, and interactive entertainment.

## Quick Reference

| Principle | Game Implementation |
|-----------|---------------------|
| Squash & Stretch | Character deformation, impact frames |
| Anticipation | Wind-up animations, charge indicators |
| Staging | Camera focus, environmental cues |
| Straight Ahead / Pose to Pose | Procedural vs keyframed animation |
| Follow Through / Overlapping | Capes, hair, weapon trails |
| Slow In / Slow Out | Animation curves, attack/recovery |

# Micro-interaction Animation

Apply Disney's 12 animation principles to small UI feedback moments and interface details.

## Quick Reference

| Principle | Micro-interaction Implementation |
|-----------|--------------------------------|
| Squash & Stretch | Button press compression, toggle bounce |
| Anticipation | Hover state hints, pre-click feedback |
| Staging | Focus attention on active element |
| Straight Ahead / Pose to Pose | Progress vs state changes |
| Follow Through / Overlapping | Ripple effects, settling motion |
| Slow In / Slow Out | Snappy but smooth transitions |

# Mobile Touch Animation

Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion.

## Quick Reference

| Principle | Mobile Implementation |
|-----------|----------------------|
| Squash & Stretch | Rubber-banding, bounce on scroll limits |
| Anticipation | Peek before reveal, long-press preview |
| Staging | Sheet presentations, focus states |
| Straight Ahead / Pose to Pose | Gesture-driven vs preset transitions |
| Follow Through / Overlapping | Momentum scrolling, trailing elements |
| Slow In / Slow Out | iOS spring animations, Material easing |

# Page Transition Animation

Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.

## Quick Reference

| Principle | Page Transition Implementation |
|-----------|-------------------------------|
| Squash & Stretch | Entering page elastic effect |
| Anticipation | Exit animation before enter |
| Staging | Hero elements bridge views |
| Straight Ahead / Pose to Pose | Shared element vs crossfade |
| Follow Through / Overlapping | Content settles after nav |
| Slow In / Slow Out | Asymmetric enter/exit easing |

# Presentation Animation

Apply Disney's 12 animation principles to Keynote, PowerPoint, Google Slides, and presentation software.

## Quick Reference

| Principle | Presentation Implementation |
|-----------|----------------------------|
| Squash & Stretch | Bounce emphasis, elastic scaling |
| Anticipation | Build sequences, pre-reveal fades |
| Staging | Focal point management, dimming |
| Straight Ahead / Pose to Pose | Morph vs discrete transitions |
| Follow Through / Overlapping | Staggered builds, delayed elements |
| Slow In / Slow Out | Ease animations, avoid linear |

# Universal Animation Principles

Disney's 12 animation principles applied generically across any medium or context.

## Quick Reference

| Principle | Universal Application |
|-----------|----------------------|
| Squash & Stretch | Show impact and flexibility |
| Anticipation | Prepare before action |
| Staging | Direct attention clearly |
| Straight Ahead / Pose to Pose | Continuous vs keyframe approach |
| Follow Through / Overlapping | Elements complete at different rates |
| Slow In / Slow Out | Ease acceleration/deceleration |

# Video Motion Graphics

Apply Disney's 12 animation principles to After Effects, Premiere Pro, and video motion design.

## Quick Reference

| Principle | Motion Graphics Implementation |
|-----------|-------------------------------|
| Squash & Stretch | Overshoot expressions, elastic motion |
| Anticipation | Pre-movement, wind-up keyframes |
| Staging | Composition, depth, focus pulls |
| Straight Ahead / Pose to Pose | Frame-by-frame vs keyframe animation |
| Follow Through / Overlapping | Delayed layers, expression lag |
| Slow In / Slow Out | Graph editor curves, easing |

# Web Motion Design

Apply Disney's 12 animation principles to CSS, JavaScript, and frontend frameworks.

## Quick Reference

| Principle | Web Implementation |
|-----------|-------------------|
| Squash & Stretch | `transform: scale()` on interaction states |
| Anticipation | Slight reverse movement before action |
| Staging | Focus user attention with motion hierarchy |
| Straight Ahead / Pose to Pose | JS frame-by-frame vs CSS keyframes |
| Follow Through / Overlapping | Staggered child animations, elastic easing |
| Slow In / Slow Out | `ease-in-out`, cubic-bezier curves |

# Anticipation & Payoff

Think like a comedian setting up a punchline. Every great moment is earned by what came before. The windup is half the pitch.

## Core Mental Model

Before animating any action, ask: **What prepares the audience for this?**

Anticipation isn't just physical preparation—it's a promise. You're telling the audience "something's coming" so they're primed to receive it. The payoff is keeping that promise with interest.

## The 12 Principles Through Setup-Delivery

**Anticipation** — The principle itself. Before going right, go left. Before jumping up, crouch down. The opposite direction creates spring-loaded energy.

# Attention Direction

Think like a magician controlling where the audience looks. Animation is misdirection and direction. You decide what matters, then make it impossible to miss—while hiding what shouldn't be seen yet.

## Core Mental Model

Before animating any scene, ask: **Where should the eye go, and in what order?**

Audiences can only look at one thing at a time. Your job is to guide their attention through the frame and through time. Every element either supports focus or competes with it.

## The 12 Principles Through Focus

**Staging** — The foundation of attention direction. Clear silhouettes. Uncluttered compositions. Important elements separated from background. Staging serves focus.

# Character Appeal

Think like a casting director watching auditions. Appeal isn't just "cute"—it's magnetic. Characters must demand attention, invite empathy, and feel uniquely themselves.

## Core Mental Model

Before animating any character, ask: **Why would anyone want to watch this person?**

Appeal is the quality that makes audiences invest. It's not prettiness—villains have appeal. It's the sense that this character is worth following. Their movement reveals their soul.

## The 12 Principles Through Personality

**Appeal** — The principle itself. Design and motion that invites connection. Clear silhouette. Readable expression. Movement that expresses inner life. Characters you remember.

# Emotional Narrative

Think like a storyteller who draws. Every movement is a sentence. Every pause is punctuation. You're not animating shapes—you're animating feelings.

## Core Mental Model

Before animating anything, ask: **What does the audience need to feel right now?**

The same walk cycle can convey confidence, defeat, nervousness, or joy. Motion is emotion made visible.

## The 12 Principles Through Emotion

**Anticipation** — The breath before the confession. Anticipation isn't just physical preparation; it's emotional setup. The audience leans in because they sense something is coming.

# Exaggerated Clarity

Think like a stage actor projecting to the back row. Subtlety is lost at speed. Your job is to make every intention unmistakable—amplify truth until it can't be missed.

## Core Mental Model

Before animating any key moment, ask: **Would this read from 50 feet away?**

Animation isn't reality—it's reality turned up to 11. Exaggeration isn't lying; it's telling the truth louder. Real life is too subtle for the screen.

## The 12 Principles Through Amplification

**Exaggeration** — The principle itself. Push every quality further than reality. Happy becomes ecstatic. Sad becomes devastated. Fast becomes blurred with speed.

# Naturalistic Motion

Think like a biologist watching life unfold. Nothing in nature moves mechanically. Everything breathes, adjusts, responds. Life is continuous subtle motion.

## Core Mental Model

Before animating anything alive, ask: **What is this creature feeling and responding to?**

Living things are never truly still. They shift weight, breathe, notice, adjust. Naturalistic motion isn't about copying reality—it's about capturing aliveness.

## The 12 Principles Through Organic Life

**Secondary Action** — Life is layered motion. While a character talks, they breathe. While they breathe, they blink. While they blink, their weight shifts. Stack subtle actions.

# Physics Intuition

Think like a physicist watching the world move. Every object has mass. Every motion has cause and consequence.

## Core Mental Model

Before animating anything, ask: **What does this weigh?**

A feather and a bowling ball both fall, but they tell completely different stories. Your job is to make the audience *feel* that weight without thinking about it.

## The 12 Principles Through Physics

**Squash & Stretch** — Mass is conserved. When something compresses, it must bulge. A bouncing ball flattens on impact because its volume has to go somewhere.

# Problem Diagnosis

Think like a doctor examining symptoms. Something feels wrong. Your job is to identify the specific principle being violated and prescribe the cure. Systematic diagnosis beats random fixes.

## Core Mental Model

When animation feels off, ask: **What principle is being violated, and how?**

"It doesn't look right" isn't actionable. The 12 principles are your diagnostic checklist. Every animation problem is a principle problem—find which one, and the solution becomes clear.

## Diagnostic Framework

### Symptom: "Floaty" or "Weightless"
**Likely Causes:**

# Rhythm & Pacing

Think like a composer scoring with motion. Animation is visual music. Beats, measures, crescendos, rests—all translate to movement and stillness across time.

## Core Mental Model

Before animating any sequence, ask: **What's the tempo, and where are the beats?**

Every good scene has rhythm. Fast-fast-slow. Action-rest-action. The pattern creates expectation; breaking the pattern creates surprise. Master the beat.

## The 12 Principles Through Music

**Timing** — Tempo control. Frames per action define speed. Consistent timing creates rhythm. Varied timing creates interest. Know when to be metronome-steady and when to rubato.

# Spatial Thinking

Think like a sculptor working in time. Your characters exist in three-dimensional space, even on a 2D screen. Every frame is a frozen moment in a world with depth.

## Core Mental Model

Before animating anything, ask: **Where is this in 3D space, and how does it move through that space?**

Animation is 4D: three spatial dimensions plus time. Characters have fronts and backs. Rooms have depth. Actions travel along vectors through real (imagined) environments.

## The 12 Principles Through Dimension

**Solid Drawing** — The foundation of spatial thinking. Every object has volume. Turn it around in your mind. Know what the back looks like. Draw through forms, not around them.

# Timing Mastery

Think like a drummer. Animation is rhythm made visible. The space between beats matters as much as the beats themselves.

## Core Mental Model

Before animating anything, ask: **How many frames does this deserve?**

Timing is the soul of animation. The same motion at different speeds tells completely different stories. Fast = light, urgent, comedic. Slow = heavy, dramatic, thoughtful.

## The 12 Principles Through Timing

**Timing** — The principle itself. Count frames obsessively. A 6-frame action feels snappy. A 24-frame action feels deliberate. Know the vocabulary of duration.

# Universal Animator Mindset

Think like a master animator who has internalized all principles so deeply they no longer think about rules—they think about life, motion, and story. This is the integrated mind.

## Core Mental Model

For any animation challenge, ask: **What truth about motion am I trying to reveal?**

The 12 principles aren't rules to follow—they're tools to wield. A master doesn't think "I need more anticipation." They think "this needs to breathe before it explodes." The principle is invisible; the intention is everything.

## The Integrated Approach

### 1. Start With Why
Before touching a frame, understand:

# Accessibility Advocate: Inclusive Animation Design

You are an accessibility advocate ensuring animation works for everyone. Apply Disney's 12 principles through an inclusive design lens.

## The 12 Principles for Accessible Animation

### 1. Squash and Stretch
**Accessibility Consideration**: Elastic motion can trigger vestibular responses. Offer reduced-motion alternative with static state changes.
**Inclusive Implementation**: Keep stretch subtle (<10% distortion). Provide instant state change for `prefers-reduced-motion`.

### 2. Anticipation
**Accessibility Consideration**: Anticipation helps users with cognitive disabilities prepare for change. Essential for screen reader timing.
**Inclusive Implementation**: Announce upcoming changes via ARIA live regions. Visual anticipation should have audio equivalent.

# Traditional Animator: Classical Animation Craft

You are a traditional animator working frame-by-frame. Apply Disney's 12 principles as they were originally intended—the foundation of the art form.

## The 12 Principles in Classical Animation

### 1. Squash and Stretch
**The Principle**: The illusion of weight and flexibility. Volume stays constant—when something squashes wider, it gets shorter. When it stretches taller, it gets thinner.
**Application**: Bouncing ball exercise. Face expressions. Full body impact and jump. The most important principle for organic life.

### 2. Anticipation
**The Principle**: Preparation for action. The wind-up before the pitch. Characters don't just act—they prepare to act. Audiences read the preparation.
**Application**: Character looks before moving. Crouches before jumping. Pulls arm back before throwing. Inhales before speaking.

# Brand Strategist: Motion as Brand Expression

You are a brand strategist defining how motion expresses brand identity. Apply Disney's 12 principles to create distinctive, consistent brand animation.

## The 12 Principles for Brand Identity

### 1. Squash and Stretch
**Brand Expression**: Elasticity defines personality. Playful brands stretch more. Premium brands stay rigid. Tech brands use precise, minimal deformation.
**Brand Examples**: Nickelodeon (hyper-elastic), Apple (minimal stretch), Slack (friendly bounce).

### 2. Anticipation
**Brand Expression**: Wind-up style signals brand energy. Long anticipation = dramatic, confident. Quick anticipation = efficient, modern. No anticipation = urgent, direct.
**Brand Examples**: Luxury brands savor anticipation. Startups skip straight to action.

# Creative Director: Animation Vision & Leadership

You are a creative director setting vision and standards for animation across projects. Apply Disney's 12 principles to lead teams toward excellent motion design.

## The 12 Principles for Creative Leadership

### 1. Squash and Stretch
**Creative Direction**: Define the elasticity range for your project. How much life do we give objects? What's our physics reality?
**Vision Question**: "On a spectrum from rigid to rubbery, where does our world live?"

### 2. Anticipation
**Creative Direction**: Establish anticipation as a pacing tool. Are we building tension or moving quickly? Anticipation is your dramatic control.
**Vision Question**: "Do we let moments breathe, or do we punch through?"

# Educator: Teaching Through Animation

You are an educator using animation to teach and explain. Apply Disney's 12 principles to create memorable, effective learning experiences.

## The 12 Principles for Educational Animation

### 1. Squash and Stretch
**Teaching Application**: Show cause and effect. Ball squashes on impact—teaches physics. Heart stretches with emotion—teaches biology and feeling connection.
**Learning Value**: Abstract concepts become tangible through visible deformation.

### 2. Anticipation
**Teaching Application**: Prepare learners for new information. Visual "get ready" before key concepts appear. Reduces cognitive surprise, improves retention.
**Learning Value**: "What's coming next" engagement. Learners lean in during anticipation.

# Filmmaker: Cinematic Animation Craft

You are a filmmaker using animation to tell stories. Apply Disney's 12 principles to create emotionally resonant, visually compelling narratives.

## The 12 Principles for Cinematic Storytelling

### 1. Squash and Stretch
**Narrative Use**: Emotional elasticity. Characters physically embody emotional states—deflated in sadness, inflated in joy. Objects reflect story weight.
**Cinematic Moment**: The hero's shoulders compress under burden, then expand with resolve.

### 2. Anticipation
**Narrative Use**: Build tension and setup payoffs. The longer the anticipation, the bigger the expected action. Subvert for comedy or shock.
**Cinematic Moment**: Extended wind-up before the knockout punch. Quick cut subverts for surprise horror.

# Frontend Developer: Animation Implementation Guide

You are a frontend developer focused on implementing performant, maintainable animations. Apply Disney's 12 principles through code.

## The 12 Principles for Code Implementation

### 1. Squash and Stretch
Use `transform: scale()` to convey impact. Buttons compress on press, elements stretch during fast movement. Animate scale properties for elastic feedback.

### 2. Anticipation
Add preparation states before actions. Buttons pull back before navigation, cards lift before expanding. Use `transition-delay` to sequence setup movements.

### 3. Staging
Control `z-index`, opacity, and blur to direct focus. Dim backgrounds during modals, spotlight active elements. Use `focus-visible` and ARIA for accessibility.

# Game Designer: Animation for Game Feel

You are a game designer crafting responsive, satisfying gameplay through animation. Apply Disney's 12 principles to create "juice" and player engagement.

## The 12 Principles for Game Feel

### 1. Squash and Stretch
**Game Application**: Impact feedback and weight. Characters squash on landing (heavier = more squash). Projectiles stretch during flight. Collectibles bounce elastically.
**Feel Impact**: Transforms static collisions into satisfying impacts. Essential for platformers, action games.

### 2. Anticipation
**Game Application**: Readable attacks and abilities. Wind-up frames telegraph incoming damage. Charging abilities build visual intensity. Players learn to read and react.
**Feel Impact**: Fair difficulty through visual communication. No "cheap shots"—players see it coming.

# Motion Designer: Visual Animation Craft

You are a motion designer creating expressive, purposeful movement. Apply Disney's 12 principles to craft animations that communicate and delight.

## The 12 Principles for Motion Design

### 1. Squash and Stretch
The soul of organic movement. Compress on impact, elongate during speed. Preserve volume—wider means shorter. Use for characters, UI elements with personality, brand mascots.

### 2. Anticipation
Wind-up before action. A button recoils before launching navigation. A drawer shrinks before expanding. Anticipation builds expectation and makes actions feel intentional.

### 3. Staging
Composition through motion. Use scale, position, focus, and timing to direct the viewer's eye. Clear the stage before introducing new elements. One clear idea per scene.

# Product Manager: Animation ROI & Strategy

You are a product manager evaluating animation investments. Apply Disney's 12 principles to drive measurable business outcomes.

## The 12 Principles for Product Strategy

### 1. Squash and Stretch
**Value**: Increases perceived quality and responsiveness. Users rate "squishy" interactions as more premium.
**Priority**: High for consumer apps, medium for B2B. Quick win—CSS-only implementation.

### 2. Anticipation
**Value**: Reduces user errors, decreases support tickets. Pre-action cues prevent accidental submissions.
**Priority**: High for destructive actions (delete, purchase). Measure: error rate reduction, support volume.

# Universal Practitioner: Animation Principles for Everyone

You apply Disney's 12 Animation Principles across any domain. These principles transcend animation—they're about bringing life and clarity to any experience.

## The 12 Principles: Universal Application

### 1. Squash and Stretch
**Principle**: Flexibility indicates life; rigidity indicates death.
**Universal Truth**: Show that things are affected by forces. Buttons respond to clicks. Arguments bend under pressure. Ideas flex to circumstances.
**Apply When**: You need to convey that something is alive, responsive, or affected by interaction.

### 2. Anticipation
**Principle**: Prepare the audience for what's coming.
**Universal Truth**: People understand better when they're ready. Announce changes. Build up to reveals. Signal before acting.

# UX Researcher: Animation & User Experience

You are a UX researcher investigating how motion affects usability, perception, and behavior. Apply Disney's 12 principles as a framework for evaluation.

## The 12 Principles for UX Research

### 1. Squash and Stretch
**Research Question**: Does elastic feedback improve perceived responsiveness?
**Method**: A/B test rigid vs elastic button states. Measure perceived speed, satisfaction scores. Users often rate elastic animations as "faster" despite identical duration.

### 2. Anticipation
**Research Question**: Do preparatory animations reduce user errors?
**Method**: Test task completion with/without anticipation cues. Pre-action signals reduce accidental clicks, improve targeting accuracy. Measure error rates and time-on-task.

# Your First Look at Animation Magic

Animation makes drawings move in ways that feel real and fun. Disney animators discovered 12 tricks that make animation look great. Here they are in simple words:

## 1. Squash and Stretch
Things squish when they hit something and stretch when they move fast. Drop a ball - it flattens on the ground, then bounces back round.

## 2. Anticipation
Before a big move, there's a small move the other way. Before jumping up, you crouch down first.

## 3. Staging
Put important things where people will see them. Like putting the main actor in a spotlight on stage.

## 4. Straight Ahead and Pose to Pose

# Nuanced Application of Animation Principles

You've internalized the fundamentals. Now explore the subtleties that separate competent from exceptional animation.

## Beyond the Basics

### Squash and Stretch: The Invisible Application
Facial animation relies on subtle squash/stretch most viewers never consciously see. Brows compress, cheeks stretch, jaw volumes shift. The principle applies to rigid objects too - camera shake and motion blur are perceptual squash/stretch.

### Anticipation: When to Subvert It
Lack of anticipation creates surprise, shock, comedy. A punch without wind-up reads as unexpected. Master animators use anticipation's *absence* as deliberately as its presence.

### Staging: Negative Space as Tool
What you don't show matters. Empty frame space creates tension. Cramped staging creates claustrophobia. Staging includes compositional psychology, not just visibility.

# Complete Animation Principles Reference

Comprehensive technical guide to Disney's 12 principles with implementation details.

## 1. Squash and Stretch

**Definition:** Deformation of objects to show flexibility, weight, and motion.

**Technical implementation:**
- Volume must remain constant (area preserved)
- Stretch along motion path at velocity peaks
- Squash perpendicular to impact surface
- Ratio guidelines: 20-50% for cartoony, 5-15% for realistic

# Transcending the Principles

Mastery means knowing when to break rules. The principles are training wheels for intuition. Here's how experts leverage, subvert, and transcend them.

## Intentional Violations

### Anti-Squash/Stretch
Rigid motion creates uncanny, mechanical, or ethereal qualities. Spirited Away's gods move without squash - otherworldly presence. Perfect volume preservation can feel more alien than violations.

### Omitted Anticipation
Into the Spider-Verse removes anticipation for snap cuts that feel like comic panels. Absence of anticipation = visual punctuation. Anticipation's removal is a choice, not an error.

### Anti-Staging
David Lynch deliberately obscures important elements. Burying the point creates unease, mystery, viewer work. Strategic confusion can be the goal.

# Combining Principles for Stronger Animation

You can apply individual principles. Now learn to weave them together and understand their interdependencies.

## Principle Synergies

### Squash/Stretch + Timing
Volume preservation is key. Faster motion = more stretch. The timing dictates the degree. A 2-frame anticipation needs less squash than a 6-frame one.

### Anticipation + Follow Through
These are mirrors. Anticipation magnitude should roughly match follow through. Big wind-up = big settle. They create rhythmic bookends to any action.

### Staging + Secondary Action
Secondary actions must support staging, never compete. If staging says "look at the face," secondary action in hands should point attention there, not away.

# The Philosophy Behind the Principles

Masters don't just apply principles - they understand their origins in human perception and storytelling. This is animation as visual psychology.

## Why the Principles Work

### Squash and Stretch: Persistence of Vision
The eye blurs motion. Stretch simulates motion blur our brains expect. Squash simulates impact compression we've observed since infancy. We're matching internal neural predictions.

### Anticipation: Predictive Processing
Human brains constantly predict next moments. Anticipation feeds this system information, making action legible. Without it, perception lags behind action.

### Staging: Attentional Bandwidth
Humans have limited focal attention. Staging respects cognitive constraints. It's not artistic preference - it's information architecture for biological processors.

# Building Your Animation Foundation

You know the basics. Now let's understand how to actually use these 12 principles in your work.

## 1. Squash and Stretch
**What it does:** Gives weight and flexibility to objects.
**Try this:** Animate a bouncing ball. Squash it 20-30% on impact, stretch it slightly at peak velocity.

## 2. Anticipation
**What it does:** Prepares the viewer for action.
**Try this:** Before a character jumps, have them bend their knees. The bigger the anticipation, the bigger the expected action.

## 3. Staging
**What it does:** Directs attention clearly.

# 12 Animation Principles in 5 Minutes

The Disney animators codified these principles in the 1930s. They still define quality animation today.

## The Principles (30 seconds each)

**1. Squash and Stretch**
Objects compress on impact, elongate in motion. A bouncing ball flattens when it hits ground. Gives life and flexibility.

**2. Anticipation**
Wind-up before action. Crouch before jump. Arm back before throw. Prepares the viewer for what's coming.

**3. Staging**
Present ideas clearly. One idea per shot. The viewer should never wonder where to look.

# Quick Principles Refresher

You know these. Here's the checklist.

## The 12

1. **Squash/Stretch** - Volume constant, shape varies. Check your impacts and fast motion.

2. **Anticipation** - Is the audience prepared? Opposite direction, proportional to action.

3. **Staging** - Silhouette test. One idea. Where's the eye going?

4. **Straight Ahead / Pose to Pose** - Right method for this shot? Maybe hybrid.

# Teaching the 12 Principles Effectively

Teaching animation principles requires meeting students where they are. Here's how to communicate each principle at different levels.

## Teaching Strategies by Principle

### 1. Squash and Stretch
**Show first:** Bouncing ball exercise - universal, immediate, undeniable.
**Common confusion:** Students preserve shape instead of volume. Use clay demonstration.
**Key phrase:** "Volume stays the same, shape changes."

### 2. Anticipation
**Show first:** Video of real athletes - every jump has a crouch.
**Common confusion:** Making anticipation too large or too long.

# Animation Troubleshooting Guide

Something's off. Use this to find and fix it.

## Symptom-Based Diagnosis

### "It feels floaty/weightless"
**Check:**
- Slow in/out - Is spacing too even? Add bunching at start/end
- Timing - Need more frames for weight? Fewer for snap?
- Squash/stretch - Impact reaction visible?
- Follow through - Settling properly or just stopping?

**Fix:** Add 2-4 frames to settle. Increase spacing variation. Add impact squash.

# Animation Principles - Universal Reference

Disney's 12 principles work at every skill level. Here's each principle with scalable depth.

## 1. Squash and Stretch

**Core idea:** Objects deform to show motion and impact.
**Beginner:** Ball flattens when it hits ground.
**Advanced:** Volume must remain constant. Facial animation uses micro-squash for expression.
**Key insight:** Even "rigid" objects can use the principle through camera shake or motion blur.

## 2. Anticipation

**Core idea:** Prepare the viewer for action.

# Attention-Grabbing Animations

Apply Disney's 12 principles to focus-drawing motion.

## Principle Application

**Squash & Stretch**: Pulsing scale draws attention. 1.0 → 1.1 → 1.0 cycle catches peripheral vision.

**Anticipation**: Brief pause before attention animation. Let it build then release.

**Staging**: Position attention elements where users will see them. Corner badges, inline highlights.

**Straight Ahead vs Pose-to-Pose**: Design attention states: rest, active/pulsing, acknowledged.

# Continuous Loop Animations

Apply Disney's 12 principles to animations that never stop.

## Principle Application

**Squash & Stretch**: Subtle scale oscillation (0.98-1.02) creates organic breathing. Avoid rigid mechanical loops.

**Anticipation**: Build anticipation into the loop cycle. Brief pause at extremes before reversing.

**Staging**: Loops should support, not dominate. Keep amplitude subtle for background elements.

**Straight Ahead vs Pose-to-Pose**: Design keyframe poses that loop seamlessly. End frame must flow into start frame.

# Entrance Animations

Apply Disney's 12 principles when bringing elements into view.

## Principle Application

**Squash & Stretch**: Scale from 95% to 100% on entry. Elements feel elastic, not rigid.

**Anticipation**: Start slightly below/smaller than final position. A -10px offset before sliding up creates expectation.

**Staging**: Enter from the direction of user attention. New list items from the top, modals from center, sidebars from their edge.

**Straight Ahead vs Pose-to-Pose**: Use pose-to-pose. Define clear start state (invisible, offset) and end state (visible, positioned).

# Exit Animations

Apply Disney's 12 principles when removing elements from view.

## Principle Application

**Squash & Stretch**: Scale down to 95-98% on exit. Element compresses slightly as it departs.

**Anticipation**: Brief pause or micro-movement before departure. A 50ms hesitation acknowledges the exit.

**Staging**: Exit toward logical destinations. Deleted items fall down, dismissed modals shrink to origin, sidebars return to their edge.

**Straight Ahead vs Pose-to-Pose**: Pose-to-pose with clear visible→invisible states. Plan the exit trajectory.

# Feedback Indicator Animations

Apply Disney's 12 principles to action confirmation animations.

## Principle Application

**Squash & Stretch**: Success checkmarks can scale with overshoot. Compress on draw, expand on complete.

**Anticipation**: Brief gather before feedback appears. 50ms of preparation before the confirmation.

**Staging**: Feedback appears at the action location. Button shows checkmark, field shows validation.

**Straight Ahead vs Pose-to-Pose**: Define feedback states: neutral → processing → success/error.

# Gesture Response Animations

Apply Disney's 12 principles to direct user interactions.

## Principle Application

**Squash & Stretch**: Elements compress on press (scale 0.95-0.97), spring back on release.

**Anticipation**: The press IS the anticipation. Response should be immediate - no delay.

**Staging**: Response originates from interaction point. Ripples expand from tap location.

**Straight Ahead vs Pose-to-Pose**: Define rest, pressed, and released poses. Transitions flow between them.

# Hover Interaction Animations

Apply Disney's 12 principles to mouse hover states.

## Principle Application

**Squash & Stretch**: Cards can subtly scale (1.02-1.05) on hover, creating "lift" effect.

**Anticipation**: Hover IS anticipation for click. The hover state previews the interaction.

**Staging**: Hover effects should highlight the interactive element, not distract from it.

**Straight Ahead vs Pose-to-Pose**: Define rest and hover poses precisely. Transition smoothly between them.

# Loading State Animations

Apply Disney's 12 principles to communicate system activity.

## Principle Application

**Squash & Stretch**: Progress indicators can pulse/breathe to show life. Slight scale oscillation (0.98-1.02).

**Anticipation**: Show loading state immediately on action. Don't wait for slow response to show spinner.

**Staging**: Loading indicators appear where content will be. Skeleton screens match final layout.

**Straight Ahead vs Pose-to-Pose**: Design loading as a sequence: instant indicator → progress → completion → content.

# Scroll Animations

Apply Disney's 12 principles to scroll-triggered motion.

## Principle Application

**Squash & Stretch**: Elements can compress slightly while scrolling fast, settle when stopped.

**Anticipation**: Content should be slightly visible before full reveal. Start animations at 10-20% visibility.

**Staging**: Reveal content in reading order. Top-to-bottom, left-to-right progression.

**Straight Ahead vs Pose-to-Pose**: Define clear "hidden" and "revealed" poses. Scroll position interpolates between them.

# State Change Animations

Apply Disney's 12 principles when elements transform without leaving.

## Principle Application

**Squash & Stretch**: Elements compress before expanding. A toggle switch squashes 5% before sliding.

**Anticipation**: Wind up before the change. Slight reverse movement (2-3px) before expanding.

**Staging**: Keep transformations centered on user focus. Don't let state changes distract from the interaction point.

**Straight Ahead vs Pose-to-Pose**: Define exact states. Button has rest, hover, active, disabled - each precisely designed.

# Transition Sequence Animations

Apply Disney's 12 principles to choreographed multi-step motion.

## Principle Application

**Squash & Stretch**: Each element in sequence can compress/expand independently for organic feel.

**Anticipation**: Sequence starts with a setup phase. Brief pause or gather before motion begins.

**Staging**: Direct attention through the sequence. Most important element animates first or last.

**Straight Ahead vs Pose-to-Pose**: Plan keyframes for each step. Map the entire sequence before implementing.

# Universal Animation Patterns

Apply Disney's 12 principles as baseline defaults for any animation.

## Core Timing Scale

| Category | Duration | Use For |
|----------|----------|---------|
| Instant | 100-150ms | Hovers, toggles, micro-states |
| Fast | 150-250ms | Feedback, small transitions |
| Standard | 250-400ms | Modals, reveals, state changes |
| Slow | 400-600ms | Page transitions, sequences |
| Deliberate | 600-1000ms | Dramatic reveals, celebrations |

# Calm & Relaxation Animation

Create animations that soothe, settle, and create peaceful user experiences.

## Emotional Goal

Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.

## Disney Principles for Calm

### Squash & Stretch
Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.

### Anticipation

# Comfort & Safety Animation

Create animations that reassure, protect, and make users feel secure.

## Emotional Goal

Comfort comes from predictable, gentle motion that never startles. Safety means animations that communicate protection, stability, and user control.

## Disney Principles for Comfort

### Squash & Stretch
Minimal, soft (5-10%). Gentle give without instability. Like a cushion—absorbs impact, maintains structure.

### Anticipation

# Elegance & Sophistication Animation

Create animations that convey refinement, luxury, and understated excellence.

## Emotional Goal

Elegance emerges from restrained, perfectly timed motion. Sophistication means animations that are noticed for their quality, not their quantity—subtle excellence over obvious effort.

## Disney Principles for Elegance

### Squash & Stretch
Extremely minimal (0-5%). Refined objects don't deform—they glide. Preserve perfect proportions throughout motion.

### Anticipation

# Excitement & Energy Animation

Create animations that energize, excite, and create dynamic, high-impact experiences.

## Emotional Goal

Excitement builds through dynamic, escalating motion. Energy comes from fast, varied animations that create momentum and keep users engaged.

## Disney Principles for Excitement

### Squash & Stretch
Dynamic and impactful (20-35%). High-energy compression and extension. Objects feel springy and responsive.

### Anticipation

# Friendliness & Approachability Animation

Create animations that welcome users and make interfaces feel warm and inviting.

## Emotional Goal

Friendliness comes from gentle, welcoming motion that doesn't intimidate. Approachability means animations that invite interaction and make users feel comfortable.

## Disney Principles for Friendliness

### Squash & Stretch
Moderate, soft deformation (10-20%). Enough to feel alive without being cartoonish. Like a friendly handshake—warm but appropriate.

### Anticipation

# Joy & Delight Animation

Create animations that spark happiness, pleasant surprise, and memorable delight.

## Emotional Goal

Joy emerges from unexpected pleasures, playful movements, and moments that exceed expectations. Delight comes from animations that feel alive, responsive, and genuinely fun.

## Disney Principles for Joy

### Squash & Stretch
Exaggerate bouncy, elastic movements. Objects that squash 30-40% on impact feel alive and playful. Use for success states, rewards, and celebrations.

### Anticipation

# Playfulness & Fun Animation

Create animations that entertain, surprise, and make interactions genuinely enjoyable.

## Emotional Goal

Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile.

## Disney Principles for Playfulness

### Squash & Stretch
Generous, exaggerated (25-40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball.

### Anticipation

# Power & Confidence Animation

Create animations that convey strength, authority, and commanding presence.

## Emotional Goal

Power comes from deliberate, controlled, weighty motion. Confidence means animations that know exactly where they're going and arrive with certainty.

## Disney Principles for Power

### Squash & Stretch
Minimal stretch, impactful squash. Heavy objects don't stretch—they compress on impact (10-15%). Weight and solidity over flexibility.

### Anticipation

# Professionalism & Credibility Animation

Create animations that convey competence, seriousness, and business-appropriate polish.

## Emotional Goal

Professionalism means motion that respects users' time and context. Credibility comes from animations that demonstrate technical competence without showing off.

## Disney Principles for Professionalism

### Squash & Stretch
None to minimal (0-5%). Professional interfaces use rigid, precise motion. Objects maintain exact proportions.

### Anticipation

# Trust & Reliability Animation

Create animations that establish confidence, consistency, and dependable user experiences.

## Emotional Goal

Trust develops through predictable, controlled movements that respect user expectations. Reliability means animations behave consistently and never surprise negatively.

## Disney Principles for Trust

### Squash & Stretch
Minimal stretch (5-10% maximum). Controlled deformation shows stability. Elements should feel solid and grounded, not rubbery.

### Anticipation

# Universal Emotion Animation Framework

Map Disney's 12 principles to any emotional goal through systematic analysis.

## Emotional Goal

Any emotion can be achieved through intentional application of animation principles. This framework helps translate emotional intent into specific motion parameters.

## Emotion Mapping Framework

### Step 1: Define the Emotion

Identify your target on these spectrums:
- **Energy**: Low ←→ High

# Urgency & Action Animation

Create animations that motivate immediate response and communicate time-sensitivity.

## Emotional Goal

Urgency creates a compelling need to act now. Action-driving animations capture attention, create momentum, and remove hesitation through dynamic, forward-moving motion.

## Disney Principles for Urgency

### Squash & Stretch
Sharp, impactful deformations. Quick squash on landing (15-25%) creates impact. Fast stretch during motion shows speed and force.

### Anticipation

# Accordion & Dropdown Animation Principles

Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.

## Principles Applied to Accordions

### 1. Squash & Stretch
Content can slightly compress as it collapses, stretch as it expands. Trigger header can squash on click feedback.

### 2. Anticipation
Before expanding, header briefly depresses. Chevron starts rotation before content reveals. Builds expectation.

### 3. Staging
Expanded section should be clearly visible. Consider dimming other accordion items. Active header stays highlighted.

# Button & CTA Animation Principles

Apply Disney's 12 principles to create buttons that feel alive and responsive.

## Principles Applied to Buttons

### 1. Squash & Stretch
Scale buttons slightly on press: `transform: scale(0.95)` on `:active`, return to `scale(1)` on release. Creates tactile feedback.

### 2. Anticipation
Subtle hover lift before click: `transform: translateY(-2px)` prepares users for the action.

### 3. Staging
Primary CTAs should be visually prominent. Use size, color contrast, and whitespace. Animate primary buttons more boldly than secondary.

# Card & Container Animation Principles

Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.

## Principles Applied to Cards

### 1. Squash & Stretch
Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.

### 2. Anticipation
Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.

### 3. Staging
The card being interacted with should lift above others via `z-index` and shadow. Dim or blur background cards to focus attention.

# Carousel & Slider Animation Principles

Apply Disney's 12 principles to carousels and sliders for smooth, intuitive navigation.

## Principles Applied to Carousels

### 1. Squash & Stretch
Slides can slightly compress in scroll direction during fast swipes. Expands perception of speed and momentum.

### 2. Anticipation
Before slide change, current slide can shift 5-10px in direction of navigation. Button can depress before triggering.

### 3. Staging
Current/active slide should be prominently displayed: larger, centered, more opaque. Adjacent slides can be dimmed or scaled down.

# Form & Input Animation Principles

Apply Disney's 12 principles to forms for clear feedback and delightful interactions.

## Principles Applied to Form Elements

### 1. Squash & Stretch
Input fields can subtly expand on focus (1-2px height). Submit button compresses on click. Checkboxes bounce on toggle.

### 2. Anticipation
Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.

### 3. Staging
Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.

# Icon & Badge Animation Principles

Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.

## Principles Applied to Icons

### 1. Squash & Stretch
Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.

### 2. Anticipation
Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.

### 3. Staging
Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.

# List & Grid Animation Principles

Apply Disney's 12 principles to lists and grids for smooth, organized motion.

## Principles Applied to Lists & Grids

### 1. Squash & Stretch
List items compress slightly when grabbed for reorder. Grid items can stretch when expanding to fill space on filter.

### 2. Anticipation
Before list reorders, items briefly compress. Before filter removes items, they can shrink slightly. Prepares for change.

### 3. Staging
Item being dragged lifts above others (z-index + shadow). Filtered results highlight while others fade. Guide eye to relevant items.

# Loader & Spinner Animation Principles

Apply Disney's 12 principles to loading indicators for engaging, informative wait experiences.

## Principles Applied to Loaders

### 1. Squash & Stretch
Bouncing dot loaders should squash on landing, stretch while rising. Creates life-like, playful motion.

### 2. Anticipation
Before progress completes, bar can briefly pause or slow. Spinners can decelerate before stopping. Signals completion coming.

### 3. Staging
Loader should be clearly visible but not block content unnecessarily. Skeleton screens stage where real content will appear.

# Modal & Dialog Animation Principles

Apply Disney's 12 principles to modals for seamless, non-jarring transitions.

## Principles Applied to Modals

### 1. Squash & Stretch
Modal can scale from 0.9 to 1.0 on enter, creating a subtle expansion feel. Exit reverses. Keep it subtle to maintain professionalism.

### 2. Anticipation
Trigger element (button) should react before modal appears. Brief scale-down of trigger, then modal emerges from that point.

### 3. Staging
Backdrop dims (0.5-0.7 opacity) to focus attention on modal. Background content can blur slightly (4-8px). Modal is the star.