AnimationIntermediate

Anticipation

A wind-up in the opposite direction before an action, telegraphing what's coming.

animation-principlecombatreadability

Examples

Captured from this page's own interactive demo below.

Overview

Anticipation moves an object slightly against its upcoming action first — a character crouches before jumping, pulls a sword back before swinging, a UI panel shrinks a touch before popping open.

It's another of the classic 12 animation principles, and it works because real bodies must gather energy before releasing it. Motion with no wind-up looks weightless and, crucially in games, gives the player no warning.

In gameplay terms anticipation is readability: an enemy's wind-up is what makes a dodge feel fair, and a boss attack without one feels cheap. The same principle at small scale makes friendly animations feel powerful rather than abrupt.

Interactive Demo

Wind-up Amount18px

Wind-up Time200ms

Use Cases

CombatPlatformerFighting gamesUI

Best Practices

Do

✓Make the wind-up proportional to the power of the action — a bigger attack earns a longer, deeper anticipation.
✓For enemy attacks, tune wind-up duration as a gameplay difficulty parameter, not just an aesthetic one.
✓Use even 1–2 frames of anticipation on UI transitions — a tiny contraction before expansion reads as energy.

Don't

✕Don't add long anticipation to the player's own frequent actions (basic jump, basic attack) — it registers as input lag.
✕Don't reuse identical wind-ups for attacks with different timings; players read anticipation as information.
✕Don't let the anticipation move the character's hitbox — it's a visual promise, not a gameplay dodge.

Common Mistakes

⚠Anticipation so subtle nobody sees it — if it doesn't read at gameplay distance and speed, it isn't there.
⚠Putting anticipation after the input instead of into the attack animation's startup frames, adding real latency.
⚠Skipping anticipation on projectile spawns, so shots appear from nowhere.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Anticipation" game-feel effect to my project: A wind-up in the opposite direction before an action, telegraphing what's coming.

How it works: Anticipation moves an object slightly against its upcoming action first — a character crouches before jumping, pulls a sword back before swinging, a UI panel shrinks a touch before popping open.

Guidelines:
- Make the wind-up proportional to the power of the action — a bigger attack earns a longer, deeper anticipation.
- For enemy attacks, tune wind-up duration as a gameplay difficulty parameter, not just an aesthetic one.
- Use even 1–2 frames of anticipation on UI transitions — a tiny contraction before expansion reads as energy.

Avoid:
- Don't add long anticipation to the player's own frequent actions (basic jump, basic attack) — it registers as input lag.
- Don't reuse identical wind-ups for attacks with different timings; players read anticipation as information.
- Don't let the anticipation move the character's hitbox — it's a visual promise, not a gameplay dodge.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.