AnimationCurveAnticipation [fact] v1.0.0

Anticipation easing (cubic-bezier with negative Y, e.g. cubic-bezier(0.36,-0.40,0.63,1.40)) briefly moves in the opposite direction before the main motion — a squash-and-stretch technique from Disney's 12 principles that signals 'action is about to begin'.

Anticipation is one of Disney's 12 principles of animation: before a character jumps, they crouch. In UI, an anticipation curve applies the same principle: before a button moves right, it briefly moves left. The cubic-bezier representation uses a negative Y control point (below 0) to create the backward dip. Anticipation is the rarest easing in UI — it is expressive and character-driven. Overuse makes UI feel clownish. Reserve for brand-expressive hero animations, mascot motion, or game-style UI.

Confidence

strong

Css Values

• Anticipation Subtle: cubic-bezier(0.36, -0.25, 0.63, 1.25) — small dip, energetic feel
• Anticipation Strong: cubic-bezier(0.36, -0.50, 0.63, 1.50) — visible wind-up before launch

Correct Uses

• Game UI: power-up button that 'charges' before activating
• Marketing hero: headline that dips before sliding into position
• Brand mascot animations: character turns head before running
• Loading complete: check icon dips before appearing — celebratory

Wrong Uses

• Dropdown menus — the dip delays content by 50-80ms, frustrating for frequent interactions
• Form inputs — any backward motion on a text field feels like an error state
• Navigation indicators — backward dip confuses spatial direction
• Any element used more than 3-4 times per session — novelty wears off fast

Quantitative

• Dip Distance: 5-15% of total travel distance
• Added Duration: +60-120ms vs equivalent ease-out
• Use Frequency: ≤ 2 anticipation animations per page — high contrast effect loses impact at scale

AnimationCurveAnticipation [fact] v1.0.0

Anticipation easing (cubic-bezier with negative Y, e.g. cubic-bezier(0.36,-0.40,0.63,1.40)) briefly moves in the opposite direction before the main motion — a squash-and-stretch technique from Disney's 12 principles that signals 'action is about to begin'.

Anticipation is one of Disney's 12 principles of animation: before a character jumps, they crouch. In UI, an anticipation curve applies the same principle: before a button moves right, it briefly moves left. The cubic-bezier representation uses a negative Y control point (below 0) to create the backward dip. Anticipation is the rarest easing in UI — it is expressive and character-driven. Overuse makes UI feel clownish. Reserve for brand-expressive hero animations, mascot motion, or game-style UI.

Confidence

strong

Css Values

• Anticipation Subtle: cubic-bezier(0.36, -0.25, 0.63, 1.25) — small dip, energetic feel
• Anticipation Strong: cubic-bezier(0.36, -0.50, 0.63, 1.50) — visible wind-up before launch

Correct Uses

• Game UI: power-up button that 'charges' before activating
• Marketing hero: headline that dips before sliding into position
• Brand mascot animations: character turns head before running
• Loading complete: check icon dips before appearing — celebratory

Wrong Uses

• Dropdown menus — the dip delays content by 50-80ms, frustrating for frequent interactions
• Form inputs — any backward motion on a text field feels like an error state
• Navigation indicators — backward dip confuses spatial direction
• Any element used more than 3-4 times per session — novelty wears off fast

Quantitative

• Dip Distance: 5-15% of total travel distance
• Added Duration: +60-120ms vs equivalent ease-out
• Use Frequency: ≤ 2 anticipation animations per page — high contrast effect loses impact at scale

Sources

Confidence

strong

Source

• Disney 12 Principles of Animation — 'Anticipation'
• Val Head, 'Designing Interface Animation' (Rosenfeld, 2016)
• CSS cubic-bezier specification — control point Y values outside [0,1]

Css Values

• Anticipation Subtle: cubic-bezier(0.36, -0.25, 0.63, 1.25) — small dip, energetic feel
• Anticipation Strong: cubic-bezier(0.36, -0.50, 0.63, 1.50) — visible wind-up before launch

Correct Uses

• Game UI: power-up button that 'charges' before activating
• Marketing hero: headline that dips before sliding into position
• Brand mascot animations: character turns head before running
• Loading complete: check icon dips before appearing — celebratory

Wrong Uses

• Dropdown menus — the dip delays content by 50-80ms, frustrating for frequent interactions
• Form inputs — any backward motion on a text field feels like an error state
• Navigation indicators — backward dip confuses spatial direction
• Any element used more than 3-4 times per session — novelty wears off fast

Quantitative

• Dip Distance: 5-15% of total travel distance
• Added Duration: +60-120ms vs equivalent ease-out
• Use Frequency: ≤ 2 anticipation animations per page — high contrast effect loses impact at scale