The Ultimate Guide To Proper Use of Animation in UX


Duration and speed of the animation




Duration of the animation you should better have in your interfaces


Size of mobile devices affects the duration of the animation



Large screen of computer = Slow animation? No way!






Avoid using the bouncing effect since it distracts attention


Do not use the blur effect in your animation


Animation for list items should last 20–25 ms




Animation with easing looks more natural compared to the linear one

Linear motion



The curve of linear motion


Ease-in or acceleration curve


Acceleration curve


Acceleration curve for throwing the card out of the screen



Same duration and distance but different moods

Ease-out or deceleration curve


Deceleration curve


Deceleration curve for a nice show-up

Ease-in-out or standard curve


Standard curve


See the difference between symmetric and asymmetric standard curve




The navigation drawer hides from the screen with the standard curve







Choreography in interfaces animation


There are two types of choreography — equal and subordinate interaction.

Equal interaction



User’s attention should be guided in one fluid direction


Diagonal appearance for the tabular view of cards

Subordinate interaction

Subordinate interaction means that we have one central object which attracts all user’s attention, and all other elements are subordinate to it. This type of animation gives the sense of order and draws more attention to the main content.

In other cases, it would be very difficult for the user to know which object to follow so his attention would be dispersed. Therefore, if you have several elements that you want to animate, you need to clearly define the sequence of their motion and to animate as minimum objects as possible at one time.

It is worth animating only one central object and all the rest subjecting to it. Otherwise, a user wouldn’t know what object to follow

According to Material Design, when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line. It helps making the movement more natural. By “disproportionally” I mean that the change of height and width of the object by increase/decrease is carried out asymmetrically, that is with different speed (for example, a square card turns into a rectangle).

The motion of an object that disproportionately changes its size should be arranged along an arc

The movement along the line is used when the object changes its size proportionally. Since the implementation of such movement is much easier, the rule of disproportional arc movement is often neglected. Looking at the real examples of applications, you’ll see the domination of the linear movement.

Proportional change of the size is fulfilled in a straight line

The motion on the curve can be achieved in two ways: the first called Vertical out — object starts moving horizontally and ends with a vertical movement; the second — Horizontal out — object begins to move vertically and ends with a horizontal motion.

The path of the object’s movement along the curve must coincide with the main axis of the scrolling interface. For instance, on the next image we can scroll interface up and down and accordingly the card unfolds in a Vertical out way — at first to the right and then down. The reverse movement is done in the opposite way — that is the card first rises vertically and ends up moving horizontally.

The direction of unfolding/folding the card should coincide with the axis of the interface

If the paths of the moving objects intersect one another, they cannot move through each other. The objects should leave enough space for the movement of another object by slowing down or accelerating their own speed. Another option — they just push away other objects. Why that? Since we assume that all objects in the interface lie in one plane.

During movement, objects shouldn’t pass through each other, but leave space for the movement of another object

In another case, the moving object can rise above other objects. But again no dissolving or movement through other objects. Why? Since we believe that the elements of the interface behave in accordance with the laws of physics, and no solid objects in the real world are capable of doing that.

Objects can rise above other objects and then move


So, if we sum up all of the above-mentioned rules and principles, the animation in the interface should reflect the movements that we know from the physical world — friction, acceleration, etc. Imitating the behavior of objects from the real world we can create a sequence that allows users to understand what to expect from the interface.


But do not forget that animation is more of an art than science, so it’s better to experiment and test your decisions on users.

References and further materials:

Leave a Reply