Install plugin

Aninix

Install plugin

Learn

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.

In summary we get a table of timings

Join us! Start creating with Aninix

Download plugin