--- 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. --- Source attribution: dylantarre Original project: https://github.com/dylantarre/animation-principles/blob/83597134ba8ff59838270f94d7ac7282ffa3b54d/skills/11-by-principle-focus/anticipation-mastery/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2024 Dylan Tarre Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: dylantarre Original project: https://github.com/dylantarre/animation-principles/blob/83597134ba8ff59838270f94d7ac7282ffa3b54d/skills/11-by-principle-focus/anticipation-mastery/SKILL.md Attribution basis: Recovered original package and original project license at a pinned revision Fields of work: Design, Development & Engineering Roles: Frontend Developer, Game Developer, Motion Designer, Product Designer, UX Designer Specialties: Cross Platform, Design Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 44c96685ec8b69156c00af9828649194ef6e191fe732f113f2e116816bf0633b Metadata reviewed: 2026-10-27 This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.