Overview
When done right, animations make an interface feel predictable, faster, and more enjoyable to use. They help you and your product stand out.
But they can also do the opposite. They can make an interface feel unpredictable, slow, and annoying. They can even make your users lose trust in your product.
So how do you know when and how to animate to improve the experience?
Step one is making sure your animations have a purpose.
Purposeful animations
Before you start animating, ask yourself: what’s the purpose of this animation? As an example, what’s the purpose of this marketing animation we built at Linear?
You can view the full animation on linear.app/ai.
This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page.
This animation I made at Vercel does exactly the same. It explains (although in a simplified way) how v0 works. This makes the page more interesting than if it was just a static asset.
Another purposeful animation is this subtle scale down effect when pressing a button. It’s a small thing, but it helps the interface feel more alive and responsive.
Sonner’s enter animation, on the other hand, has two purposes:
- Having a toast suddenly appear would feel off, so we animate it in.
- Because it comes from and leaves 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 might just be to bring delight.
Morphing of the feedback component below helps make the experience more unique and memorable. This works as long as the user will rarely interact with it. It’ll then become a pleasant surprise, rather than a daily annoyance.
We’ll build this component later in the course.
Used multiple times a day, this component would quickly become irritating. The initial delight would fade and the animation would slow users down.
How often users will see an animation is a key factor in deciding whether to animate or not. Let’s dive deeper into it next.
Frequency of use
I use Raycast hundreds of times a day. If it animated every time I opened it, it would be very annoying. But there’s no animation at all. That’s the optimal experience.
To see it for yourself, try to toggle the open state of the menu below by pressing J and then K. Which one feels better if used hundreds of times a day?
When I open Raycast, I have a clear goal in mind. I don’t expect to be “delighted”, I don’t need to be. I just want to do my work with no unnecessary friction.
Think about what the user wants to achieve and how often they will see an animation. A hover effect is nice, but if used multiple times a day, it would likely benefit the most from having no animation at all.
Imagine you interact with this list often during the day.
The same goes for keyboard-initiated actions. These actions may be repeated hundreds of times a day, an animation would make them feel slow, delayed, and disconnected from the user’s actions. You should never animate them.
To see it for yourself, focus on the input below and use arrow keys to navigate through the list. Notice how the highlight feels delayed compared to the keys you press. Now press (shift) and see how this interaction feels without animation.
Press shift to toggle the animation
You might like this animation at first because you use it in a course environment, which is not your daily driver. That’s why it’s important to really think and imagine how this would feel if you used it more frequently. Like Raycast for example.
Perception of speed
Unless you are working on marketing sites, your animations have to be fast. They improve the perceived performance of your app, stay connected to user’s actions, and make the interface feel as if it’s truly listening to the user.
To give you an example, a faster-spinning spinner makes the app seem to load faster, even though the load time is the same. This improves perceived performance.
Which one works harder to load the data?
A 180ms dropdown animation feels more responsive than a 400ms one:
As a rule of thumb, UI animations should generally stay under 300ms.
Another example of the importance of speed: tooltips should have a slight delay before appearing to prevent accidental activation. Once a tooltip is open however, hovering over other tooltips should open them with no delay and no animation.
This feels faster without defeating the purpose of the initial delay.
Radix UI and Base UI skip the delay once a tooltip is shown.
Choosing the right duration
We now know that the duration of your animation is influenced by its frequency of use, and that usually, animations should stay under 300ms. That’s a general rule that works most of the time, but there are a few other factors that might affect the duration you choose.
Let’s explore two of them.
Size of an element: The Vercel time machine I built for a hackathon uses an ease-in-out animation, with a 1s duration. The main reason for this duration is that the animated element is big, bigger elements are “heavier” and should animate slower.
Easing: Remember the dropdowns example? Their duration is exactly the same, but the left one feels slower. If we really wanted to use that one, we would need to shorten the duration.
Vaul’s enter animation duration is 500ms, way over the 300ms guideline. That’s because there’s a custom easing curve used there to try and match the iOS Sheet component. This curve is very steep at the beginning which means that using a duration of 300ms would feel faster than that.
You can see the easing curve used in Vaul below, it’s extremely steep. I wanted to mimic a spring animation which has that characteristic gentle ending. To achieve that, I had to make the duration pretty long while not losing its snappiness, so the beginning had to be steep.
This curve is `0.32, 0.72, 0, 1` if you’d like to try it.
Marketing vs Product animations
Most of the rules above apply to both marketing and product animations, but marketing pages give you more freedom.
Marketing pages are the packaging of your product. They should create a memorable experience for the user, and animations can help achieve that.
These pages are also usually viewed less often than the product itself, so we can be more flexible with the duration of our animations.
At Linear, I work on the Web team, which means I’m one of the people in charge of our marketing pages. I’ll go through a few animation examples to give you a better understanding of how and when to animate on marketing pages.
The duration of this animation that you saw earlier is pretty long, but this page was a teaser for an upcoming release, so we wanted something unique and memorable.
Our usual pages like Careers have shorter intro animation, but we often add subtle touches to keep them special. In this case the blueprint-like notes around the logo are animated. It’s subtle, it doesn’t have to be flashy.
Notice the smaller animations around the logo.
These intro animations run only once. If you navigate from the homepage to a different page, and then navigate back, the animation won’t replay.
You can also use animations as subtle surprises. This momentum illustration, could’ve been static, but we decided to animate it. This interaction is not obvious, which is okay, it serves as a joyful surprise for those who find it.
Same goes for this graph animation. In Linear’s product, animating a graph like this would be wrong, there’s no point in doing that. But since it serves as just an illustration on one of our marketing pages, we decided to add an easter-egg interaction to it.
We will build a similar component later in the course.
Even on marketing pages we need to be careful with the amount of animations we add. If we overdo it, the user will become overwhelmed and animations lose their impact. If everything animates, then nothing stands out.
Great interfaces
The goal is not to animate for animation’s sake, it’s to build great user interfaces. The ones that users will happily use, even on a daily basis. Sometimes this requires animations, but sometimes the best animation is no animation.