You don’t need any animations

When it is done well, animations make an interface predictable, faster and more fun to use. They help you and your product stand out.

But they can also do the opposite. They can feel an interface unpredictable, slow and annoying. They can even let your users lose confidence in your product.

So how do you know that when And How To animate to improve experience?

Step one is to ensure that your animations have a goal.

Aimal animations

Ask yourself before you start animate: what is the purpose of this animation?
As an example, what is the purpose of this marketing animation that we have built on linearly?

This animation explains how product intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user to understand what this function is doing directly in the first viewport of the page.

Another goal -oriented animation is this subtle scale power effect when pressing a button. It is a small thing, but it helps the interface more lively and more responses.

Sonner’s Enter Animation, on the other hand, has two goals:

• – A toast suddenly appears, so we animate it.
• – Because it comes from the same direction and departs in the same direction, it creates spatial consistency, making the Swipe-down-to-Dismiss-gesture feel more intuitive.

But sometimes the purpose of an animation may be just to bring pleasure.

Morfing of the feedback component below helps to make the experience more unique and memorable. This works as long as the user rarely communicates with it. It will then be a pleasant surprise, instead of a daily annoyance.

Used several times a day, this component would quickly become annoying. The first pleasure would fade and the animation would slow users.

How often users will see an animation is a key factor to decide whether they should animate or not. Then let’s go deeper into it.

Frequency

I use hundreds of times hundreds of times a day. If it was animated every time I opened it, it would be terribly Annoying. But there is no animation at all. That is the optimum experience.

To see it yourself, try to switch the open status of the menu below Use the buttons belowurgently J and then K. Which feels better if he is used hundreds of times a day?

When I open Raycast, I have a clear goal in mind. I don’t expect that I will be “delighted”, I don’t have to be. I just want to do my job without unnecessary friction.

Think about what the user wants to achieve and how often they will see an animation. A hover effect is fun, but if it is used several times a day, it would probably benefit the most from having no animation at all.

The same applies to actions initiated by keyboard. These actions can be repeated hundreds of times a day, an animation would cause them to slowly, delayed and disconnected from the user’s actions. You should never Anim them.

Because we can’t really use a keyboard on touch devices, you can press the buttons below to see how it feels with and without animation.

To see it yourself, concentrate on the input below and use your arrow keys to navigate through the list. Note how the highlight feels delayed compared to the keys you press. Pressure now (shift) and see how this interaction feels without animation.

But even if your animation is not used too often and it fulfills a clear goal, you still have to think about the speed …

Perception of speed

Unless you work on marketing sites, your animations to have To be fast. They improve the observed performance of your app, remain connected to the user’s actions and let the interface give the feeling that he is really listening to the user.

To give you an example, a faster spinning spinner lets the app load faster, although the loading time is the same. This improves the observed performance.

A 180ms Dropdown -animation feels more responses than one 400ms An:

As a rule of thumb, onion animations must generally remain under 300ms.

Another example of the importance of speed: tool tips must have a slight delay before they seem to prevent unintended activation. However, as soon as a tool tip is open, floating over other tool tips should open them without delay and no animation.

This feels faster without beating the goal of the first delay.

Build good interfaces

The goal is not to animate for animation, it is to build great user interfaces. Those who will be happy to use users, even on a daily basis. Sometimes this requires animations, but sometimes the best animation is not animation.

Knowing when you have to animate is just one of the many things you need to know to make great animations. If you want to dive deeper into theory and practice it, I have made a course that treats everything you need to know:

View “Animations on the internet”