---
name: anticipation-mastery
description: Use when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden.
---

# 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

1. **Physical preparation**: The body must coil to spring (jumping, throwing, punching)
2. **Mental preparation**: The audience needs time to register incoming action
3. **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

1. **Skipping anticipation entirely**: Actions feel robotic and sudden
2. **Over-anticipating minor actions**: Creates sluggish, over-animated feel
3. **Wrong direction**: Anticipation must oppose the action direction
4. **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.