You Don't Need Animations

Summary

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? 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. 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. Press on the button to see it morph. 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 wo...