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

Anticipation Payoff

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

Complete two-beat motion sequences where a primed UI element delivers a satisfying follow-through after the user commits an action.

About

Teaches how to land anticipation with a clear payoff: the rewarding second beat after priming, including follow-through, overshoot, settle, and state confirmation so interactions feel complete and credible.

  • Two-beat anticipate-then-resolve sequences
  • Follow-through and settle after primary motion
  • Emotional satisfaction on success and confirmation states
  • Timing gaps that avoid mushy or abrupt endings
  • Reusable payoff patterns for toasts and modals

Anticipation Payoff by the numbers

  • 326 all-time installs (skills.sh)
  • Ranked #760 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-payoff

Add your badge

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

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

What it does

Complete two-beat motion sequences where a primed UI element delivers a satisfying follow-through after the user commits an action.

Files

SKILL.mdMarkdownGitHub ↗

Anticipation & Payoff

Think like a comedian setting up a punchline. Every great moment is earned by what came before. The windup is half the pitch.

Core Mental Model

Before animating any action, ask: What prepares the audience for this?

Anticipation isn't just physical preparation—it's a promise. You're telling the audience "something's coming" so they're primed to receive it. The payoff is keeping that promise with interest.

The 12 Principles Through Setup-Delivery

Anticipation — The principle itself. Before going right, go left. Before jumping up, crouch down. The opposite direction creates spring-loaded energy.

Timing — Setup needs time to register. Rush the anticipation and the payoff feels random. Hold it too long and tension deflates. Find the sweet spot.

Staging — Frame the anticipation so it's unmissable. The audience can't appreciate a payoff they weren't prepared for. Clear staging of setup = satisfying delivery.

Exaggeration — Push the anticipation to heighten payoff. A bigger windup = bigger impact. But match scales—extreme setup needs extreme delivery.

Follow Through & Overlapping Action — Payoff has aftermath. The action doesn't end at impact; it resolves through settling motion. Let consequences play out.

Secondary Action — Setup through supporting elements. Environment reacts to gathering energy. Other characters notice. Secondary actions can foreshadow the main event.

Slow In & Slow Out — Ease into anticipation (building tension), snap through the action (release), ease out of payoff (resolution). The rhythm of drama.

Squash & Stretch — Compression before extension. Squash is stored energy (setup). Stretch is released energy (payoff). Physical metaphor for narrative structure.

Arcs — Setup and payoff follow complementary arcs. The anticipation arc winds backward; the action arc springs forward. Together they form a complete gesture.

Appeal — Well-structured anticipation-payoff is inherently satisfying. Audiences love the rhythm of setup and delivery. It's why jokes work.

Straight Ahead & Pose to Pose — Plan your key moments: anticipation pose, action peak, payoff pose. Then connect them. Know your destination before you travel.

Solid Drawing — Maintain volume through the sequence. The same character in setup and payoff must read as the same mass. Consistency grounds the action.

Practical Application

Types of Anticipation:

  • Physical: Crouch before jump, pullback before throw
  • Emotional: Inhale before outburst, stillness before action
  • Environmental: Quiet before storm, calm before chaos
  • Comedic: Pause before punchline, look before double-take

Payoff Techniques:

  • Exceed expectation: Deliver more than the setup promised
  • Subvert expectation: Deliver something unexpected (comedy)
  • Delay gratification: Multiple anticipations before one big payoff
  • Instant release: Snap from full anticipation to peak action

When payoff feels "weak": 1. Extend anticipation duration 2. Increase anticipation magnitude 3. Add secondary anticipation cues 4. Sharpen the contrast between setup and action

When setup feels "telegraphed": 1. Reduce anticipation duration 2. Distract with secondary action 3. Use environmental anticipation instead of character 4. Let payoff extend beyond expectation

The Golden Rule

Every action is a tiny story: beginning, middle, end. Anticipation is "once upon a time," action is "and then," payoff is "the end." Skip any chapter and the story fails.

Related skills

This week in AI coding

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

unsubscribe anytime.