home / skills / dylantarre / animation-principles / anticipation-mastery
This skill guides you to design actions with clear anticipation, improving readability and user engagement across motion, UI, and interactions.
npx playbooks add skill dylantarre/animation-principles --skill anticipation-masteryReview the files below or copy the command above to add this skill to your agents.
---
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.
This skill teaches how to apply the animation principle of anticipation to make motions, interactions, and state changes feel intentional and readable. It frames anticipation as physical, mental, and emotional preparation that guides attention and amplifies impact. Use it to add clarity and dramatic weight to UI motion, character action, micro-interactions, and game mechanics.
The skill inspects an action sequence and recommends a preparatory counter-movement or pause that precedes the main motion. It suggests timing ratios, directionality, and magnitude based on the action’s importance and duration. It flags missing anticipation, over-anticipation, and incorrect directional setup, and proposes concrete adjustments (frame lengths, percentage of main action, or micro-movement types).
How long should anticipation be relative to the main action?
Aim for roughly 30–50% of the main action; for small actions use 2–4 frames, for major actions 12–24 frames or about a second of wind-up when significant.
When is it okay to skip anticipation?
Skip or minimize anticipation for ultra-fast, subtle feedback where delay would hurt responsiveness, or intentionally omit it to create surprise or a jarring comedic effect.