Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
dylantarre avatar

Anticipation Mastery

  • 319 installs
  • 68 repo stars
  • Updated December 30, 2025
  • dylantarre/animation-principles

Implement pre-action motion cues on buttons, menus, and modals so users sense what will happen before click, tap, or submit.

About

Guides engineers and designers to master anticipation in interface motion: subtle pre-movement, scale, opacity, or offset shifts that telegraph the next UI state before the main transition executes.

  • Pre-action visual wind-up before state change
  • Easing curves that signal direction and intent
  • Reduced surprise on destructive or irreversible actions
  • Pairs with hover, focus, and press micro-interactions
  • Disney anticipation principle adapted for web UI

Anticipation Mastery by the numbers

  • 319 all-time installs (skills.sh)
  • Ranked #778 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill anticipation-mastery

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs319
repo stars68
Last updatedDecember 30, 2025
Repositorydylantarre/animation-principles

What it does

Implement pre-action motion cues on buttons, menus, and modals so users sense what will happen before click, tap, or submit.

Files

SKILL.mdMarkdownGitHub ↗

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.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.