UI Animations

Why do we need UI animations

Let's look at the world around us. Movements in nature are not linear. We understand how objects are transformed and each of them has physical characteristics that affect motion.

Now let’s look at the interfaces. Elements are abstract, they don’t have physical characteristics. Designers often forget about their animation.

Static transitions between screens and elements leave an unpleasant impression because of the blinking effect, our brain is constantly trying to understand what is happening at these intervals.

Thoughtful designers know this and think about how the interface will respond to user's actions.

Quality animations not only "liven up" the interface, but also clearly indicate state of a system and relationships of objects on the screen. At the same time poorly designed transitions can confuse users and complicate an interface. Therefore, for each animation you need to clearly understand its goals.

Function Changes

Hierarchy of elements and their interaction

With the help of animations, we can show how the elements on the screen correlate with each other, which are the main ones, and which are secondary. For example, using the different speed of elements appearance in the list, we show priority.

Delightful Details

Principles

There are many principles that allow you to create friendly interactions between users and interface. One of the most important is easing, that responsible for the speed of the animation, making it more realistic. The main types:

Linear

Animations without any kind of easing. Linear animation seems unnatural, so we strongly advise you not to use it. The team of Principle absolutely agrees with us and suffers when someone uses it.

Ease-in

This animation starts slowly and ends fast. Because of abrupt end may seem unusual.

Ease-out

Starts more quickly than linear ones, and it also has deceleration at the end. Easing out is typically the best for user interface work as it seems most familiar and natural.

Ease-in-out

Union of the last two types. It looks good on short animations.

Bounce or elastic effects

Look interesting, but they overload the animation, so it should be applied pointwise and only if this effect is suitable.

In conclusion

For natural users communication with app interface or site don’t forget to design the animated transitions. They will help create a friendly interface and attractive microinteractions, your site or application will be much more pleasant.Take care of your users