Timing
- The average human reaction time to a visual change is 215ms. A duration between 200 and 300ms should be the sweet spot for most animations.
- The Modal Human Processor indicates it takes between 70ms - 700ms for our eyes to move. The location of the element that is being animated should affect the duration.
- Hover transitions should be faster than other animations, as we are focused on the element.
- Our eyes are quite sensitive to color changes, so we can use even shorter duration for color and opacity transitions.
Timing Guidelines
- Its not great to have fixed rules around animation duration. Instead, use judgement and experience.
- Everything should be evaluated on a case-by-case basis. (Even the below guidelines.)
| Animation Type | Guideline Duration |
|---|---|
| Hover | 150ms |
| Modals | 200ms (Enter) and 150ms (Exit) |
| Popovers | 200ms (Enter) and 150ms (Exit) |
Showcase
Large animations require longer duration due to the large visual changes. This
ease-in-outanimation uses 1s as the duration.
When the easing curve is steep, using smaller values can feel too fast. You can see the difference between 500ms (default) and 200ms for the custom curve vaul uses.
The spinner on the right feels like it would load faster, due to the speed of the animation.