Anticipation
A preparatory motion or visual cue that signals what is about to happen, reducing surprise and making transitions feel intentional.
Plain English
Anticipation is the windup before the pitch. In Disney animation it is the principle that a character crouches before jumping — the pre-motion tells you what is coming and makes the main action feel more powerful. In UI, anticipation is the button that compresses slightly before navigating, the card that tilts before flipping, the sheet that peeks before fully opening. Without it, transitions feel teleporting rather than moving. With it, the interface feels like it has weight and intention. The practical value is not just aesthetics — anticipation primes the user's attention so they are looking at the right place when the transition happens.
Research background
Implement anticipation with a two-keyframe setup: first keyframe moves opposite to the main direction (the 'windup'), second keyframe overshoots in the main direction (ease-out or spring). Example for a press: @keyframes press-anticipate { 0% { transform: scale(1); } 15% { transform: scale(1.02); } 100% { transform: scale(0.96); } }. For a page push transition: anticipate by moving the current page 2–4px in the opposite direction of the incoming page before the slide begins. Spring easing (cubic-bezier with overshoot, e.g. 0.34, 1.56, 0.64, 1) naturally builds in anticipation at the overshoot point. Duration: anticipation phase 60–100ms, main action 150–300ms.
UI examples
✓ Applying the principle
iOS app icon launch: the icon briefly scales up (0→5%) before launching into full-screen — the micro-expansion signals 'something is coming' and primes the eye. iOS bottom sheet: the edge of the sheet is visible (peek) before the user swipes up, anticipating the full reveal.
✗ Violating it
A navigation transition that instantly replaces the current view with no preparatory cue — the abrupt cut feels like a bug rather than a design choice, even if it is technically fast.
AI Prompt
Paste into Claude, Cursor, Bolt, or v0.
Add anticipation to these interactive elements: (1) CTA button — on click, scale to 1.02 over 60ms then animate to destination. (2) Modal open — dialog should emerge from the trigger element origin rather than appearing from the centre. (3) Swipe gesture — show a 4px peek of the next panel before the swipe begins. Use spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)) for the return-to-idle phase.