How to choose timing for UI animation
A little guide to help you find the right timing for any UI animation
Final table of timings (in milliseconds)
Type of animation
Mobile
Tablet
Desktop
Fast
60-200
120-400
240-800
Medium
200-400
400-800
800-1600
Complex
400-550
800-1100
1600-2200
Theory of timings calculation
The duration of the animation varies depending on:
Object size
Moving distance
Complexity of secondary animations
💡 Duration calculation formula for animation
+ size of the object
+ moving distance
+ the complexity of the animation inside the object
= more time for animation.
A direct-proportional relationship.
How to choose a specific time frame
1. This is where physiology (https://en.wikipedia.org/wiki/Eye_tracking) comes to the rescue. Eye movements are divided into two types: saccade and fixation.
Eye fixation when reading takes 200ms, while viewing images takes 350ms.
And saccade (duration between fixations) takes 200ms.
2. There was also an experiment which brought out a fi-phenomenon: people were shown consecutively illuminated light sources with different delays.
- Up to 60ms people thought the sources lit up at the same time;
- from 60ms to 200ms - one light source was moving;
- from 200ms - a delay was seen between light sources turning on.
The following conclusions can be drawn from the boring data:
• 60ms to 200ms for fast animations;
• 200ms to 400ms for medium animations;
• 400ms to 550ms for complex animations.
Coefficients
For simplicity, we can introduce a small coefficient to multiply timings related to the screen size, for example:
• 1 for mobile;
• 2 for tablets;
• 4 for desktops.
