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.
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.
... continue reading