Agent skill
anticipation-mastery
Use when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden.
Install this agent skill to your Project
npx add-skill https://github.com/dylantarre/animation-principles/tree/main/skills/11-by-principle-focus/anticipation-mastery
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
icons-badges
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
lists-grids
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
loaders-spinners
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
Didn't find tool you were looking for?