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.

anticipation-mastery