Principles of good animation
Animation is one of the core things that make a website feel "alive." Done well, it captures the user's attention to what matters, helps them take proper actions, and leaves a delightful brand experience in the user's mind. Done poorly, however, you risk losing a customer, particularly the distractable and impatient (AKA most of your users).
When designing interfaces, it’s crucial to understand what makes animation good. Because the only thing worse than having no animation at all is having animation that feels clumsy, distracting, or out of place.
The two umbrellas of animation in interface design
Most animations really fall under these two umbrellas. It's a good practice to identify which type you are creating for your interface:
Utility
Helps the user complete tasks (e.g. hover feedback, directs attention, communicates system status)Expression
Adds character, sets a certain mood, and emphasizes the brand experience (e.g. a parallax image scroll effect, animation of certain branded elements)
Utility animations are usually more important, since they directly shape the user experience. That said, expression animations still matter. A website without expression quickly fades into the background, which is the last thing you want when you’re new in the market and trying to attract customers. Good visuals can do the selling for you.
General animation best practices
In no particular order, your animation should:
Correspond with it's size. Larger elements take slightly longer to animate, while smaller element should be quick.
Be smooth, mimic reality, and feel natural. Have you ever seen anything that moves with linear speed in real life?
Be dismissible and forgiving of errors. e.g. How many times have you opened a navigation menu on hover because it was just so fast?
Be fast. Designed for the most bored and impatient person. Your 5 second splash screen is impressive, but it also takes 5 seconds of everyone else's life. On an app that is used daily by 10,000 users, that's 50,000 wasted seconds, multiply that by the number of times it was opened daily, crashed, and more.
Follow a consistent theme and be relevant to the brand. e.g. using Instant animation transition on all elements to reflect a retro look, or a very eased in transition for a brand that sells a relaxing experience, dream vacation in The Bahamas, or perhaps a massage.
Provide feedback. e.g. A wiggle effect that indicates something's wrong with your text input, a spinner in the button after clicking to re-assure that you've clicked.
Provide feed-forward. A card expanding in size ever so slightly to indicate that you're going to expand this page.
Nest non-essential or secondary actions in a way that helps declutter the interface, but without making them inaccessible. For example, Spotify’s volume slider reveals the adjustment ball only on hover, and YouTube’s ‘Watch Later’ button appears on a video card only when you hover over it, since it’s a secondary action and doesn’t need to be always visible.
Be completely within the user's control. No random overlays and unexpected behavior, whatever the user chooses to interact with, is what the interface communicates back.
Be delightful. If you have some websites saved because you liked the way a certain button animates upon hover, or by an unexpected animation that just added a lot of character, then you know this one very well.
Pass time effectively. Having a cool loading spinner to look at while the API is being called, is much better than staring at a blank page with your reflection looking right back at you.
Not cause nausea or photosensitivity.
Be non-distracting. If something is unimportant and will not directly impact the user's decision, avoid animating it.
If you animate a section intro, play it only once. Avoid repeating it on scroll, since pages that loop section animations while moving up and down quickly become distracting.
Be considerate of the medium it's being designed for. For instance, a marketing website can get away with way more animations compared to an app, as the former's goal is to attract a user, while the latter's is to maintain them. Attracting through delight vs. reaching goals efficiently.
Only be used as an enhancement to a well-designed interface. Animation should not be used as a cover up for a poorly designed interface.
Sep 13, 2025