Small Transitions (200-300ms)

At 200-300ms, users consciously perceive motion. This duration bridges micro-interactions and full animations - ideal for UI state changes.

Disney Principles at Small Duration

Works Well

Squash & Stretch: Visible but restrained - 10-15% for playful interfaces, 5% for professional.

Anticipation: Brief wind-up works - 40-60ms preparation enhances 200ms main action.

Staging: Clear hierarchy - primary element leads, secondary follows by 50-100ms.

Straight Ahead/Pose to Pose: Pose to pose preferred - keyframes create polished motion.

Follow Through: Noticeable overshoot - 5-10% past target adds life.

Slow In/Slow Out: Full easing curves - both ease-in-out and custom beziers shine.