Anticipation Easing — Wind-Up Before Action

Anticipation in Animation

Anticipation is one of Disney's 12 Principles of Animation. Before a major action, the subject winds up in the opposite direction — a character crouches before jumping, a ball compresses before bouncing. In UI, this principle adds personality and readability to interactions.

The Values

transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);

This is the easeInBack curve. The negative y1 value (-0.28) causes the animation to move backward by about 28% of the total change before accelerating forward.

How It Feels

1. The element briefly moves in the opposite direction of its final destination.
2. It then accelerates forward with increasing speed.
3. It arrives at the endpoint without overshoot.

Code Example

.tooltip {
  transform: scale(0);
  transition: transform 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.tooltip.show {
  transform: scale(1);
}

When the tooltip appears, it briefly shrinks slightly below scale(0) before growing to scale(1). This creates a "winding up" effect that makes the appearance feel deliberate.

Combining Anticipation with Overshoot

For maximum expressiveness, combine anticipation (negative y1) with overshoot (y2 > 1):

/* easeInOutBack */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

This produces a wind-up at the start AND an overshoot at the end, creating the most elastic, characterful motion.

Guidelines for Using Anticipation

• Subtle is better: Keep y1 between -0.1 and -0.3 for UI elements.
• Pair with intention: Only use anticipation for actions the user initiated.
• Avoid for system feedback: Loading states, error messages, and status updates should not have anticipation — they should respond immediately.