Duration & asymmetric timing

## Duration by component type | Component | Enter duration | Exit duration | Notes | | ----------------------------- | -------------- | ------------- | ---------------------------------- | | Button press / micro-feedback | 50-100ms | 50-80ms | Must feel instant | | Tooltip | 100-150ms | 75-100ms | Fast in, faster out | | Popover / dropdown | 150-200ms | 100-150ms | Emerges from trigger | | Toast / notification | 200-250ms | 150-200ms | Slides from edge | | Modal / dialog | 200-350ms | 150-200ms | Scale + opacity | | Drawer / sheet | 250-350ms | 200-250ms | Slides across significant distance | | Page transition | 150-250ms | 100-150ms | Keep it tight | Nothing exceeds 400ms. } /> ## Enter slow, exit fast **1.5:1 to 2:1**. Enter at 250ms, exit at 150ms. A drawer enters at 300ms, exits at 180ms. ## The 300ms budget Total animation time for any single interaction: 300ms max. 5 items staggered at 50ms = 250ms total. An 800ms stagger looks like a broken loader. ## Duration and distance More distance needs more time, but not linearly. A drawer sliding 300px: ~300ms. A tooltip appearing 8px below its trigger: 100ms. A panel sliding 600px: ~350ms, not 600ms. Double the distance, add 30-50% more duration. ## When to skip duration entirely Toggle states, checkbox fills, colour transitions on hover, focus-visible outlines.