Anticipation Mastery
The Setup Principle
Anticipation prepares the audience for action. Discovered through theatrical observation, Disney animators found that without a preparatory movement, actions appeared to happen "out of nowhere"—confusing rather than exciting. The principle: before any significant action, there must be a counter-movement.
Core Theory
Newton's Third Law, Visualized: Physical actions require preparation. A pitcher winds up before throwing. A cat crouches before pouncing. Anticipation makes this mechanical necessity visible and dramatic.
Attention Direction: Anticipation tells viewers where to look and what to expect. It transforms surprise into suspense—a more engaging emotional state.
The Three Functions
- •Physical preparation: The body must coil to spring (jumping, throwing, punching)
- •Mental preparation: The audience needs time to register incoming action
- •Emotional preparation: Building tension before release amplifies impact
Timing Dynamics
Duration signals magnitude: Brief anticipation (2-4 frames) for small actions. Extended anticipation (12-24 frames) for major moments. A full second of wind-up tells viewers something significant is coming.
Inverse proportion: The bigger the anticipation, the faster the following action can be while remaining readable.
Interaction with Other Principles
Staging depends on anticipation: The preparatory pose directs attention to where action will occur.
Timing is defined by anticipation ratio: Classic formula is 1:2—one beat of anticipation for two beats of action.
Squash/stretch often appears here: Characters compress before explosive movement.
Exaggeration amplifies anticipation: Cartoon wind-ups exceed physical possibility for comedic effect.
Domain Applications
UI/Motion Design
- •Button hover states: subtle scale-up anticipates the click response
- •Page transitions: brief pause or micro-movement before navigation
- •Loading states: pulsing or winding animation before content appears
- •Drag interactions: slight resistance before element "releases"
Character Animation
- •Jump preparation: full crouch with held pose before launch
- •Punch delivery: shoulder rotation backward before forward strike
- •Emotional shifts: beat of stillness before reaction
Micro-interactions
- •Toggle switches: brief compression before snap to new state
- •Notifications: subtle entrance from off-screen before settling
- •Tooltips: micro-delay with subtle scale from origin point
Game Design
- •Attack wind-ups: readable tells that allow player response
- •Ability charging: visual buildup matching power accumulation
- •Boss patterns: exaggerated anticipation creates learnable mechanics
Common Mistakes
- •Skipping anticipation entirely: Actions feel robotic and sudden
- •Over-anticipating minor actions: Creates sluggish, over-animated feel
- •Wrong direction: Anticipation must oppose the action direction
- •Uniform timing: Vary anticipation length based on action importance
The Reversal Technique
For comedic or surprising effect, violate anticipation expectations. Long wind-up followed by tiny action. No wind-up before massive action. The principle's power is proven by how jarring its absence feels.
Implementation Heuristic
Every action above 200ms duration should have anticipation. Scale anticipation duration to 30-50% of the main action. When actions feel "empty," anticipation is usually missing.