Basic rules for web animations

Animations can make a website stand out. Or they can easily kill the experience. When working with web animations, there are a few things that can go wrong, such as adding animations that serve no purpose, setting durations that are too long or too short, or not using the right type of animation in the first place. Even if all these things are done correctly, a style Animation may not look good, especially if it's not in sync with other animations or consistent with the overall personality of the site.

Another important thing to note is that not all digital experiences should share exactly the same animations. A marketing website may need different animations than a product website or a mobile app. While the same basic principles of motion apply to all, there are some nuances based on the type of content and screen size.

For example, let's say you want to make a boring form more exciting to fill out. You add charming animations to each step that follows, but is that a good idea for a form that you know a user needs to visit and fill out frequently? Watching the same animations repeatedly can be irritating in this case.

Clearly, there are conditions and considerations that will serve animations well. In this article, we'll discuss how to add animations to product websites. We'll delve a little deeper into this and establish some basic rules for working with them. Not so much a manifesto, but more of a baseline we can reference and kind of come together to.

 

First of all, what is a good situation for an animation?

When used well, an animation is almost like content – it provides context and has a meaning that helps inform the user that something has happened and even what to expect next. Here are some good situations where animation can do just that.

UI block transition

This may be the most common use case for animations. When a UI block is moved from its original position, or added to or removed from the DOM, it's a good idea to let users see it happen.

Loading content

A loading animation is something we've all seen and encountered at some point! Otherwise, a A quick visit to CodePen. This shows how popular loading animations are. They are ideal as spaces reserved for content , where users not only receive a hint of what to expect when content loads, but also have the confidence that something is actually loading.

In addition to making the site faster, it also prevents the reflow of unstable content, which can be extremely disorienting because elements are rendered at different times.

Loading placeholders is, of course, better when you know the height of the content blocks in advance.

Suggestion

It's usually a single animation where the goal is to give users a hint of where to look or what to do next. Some UIs are complex by nature. A small glow or ripple can help guide users through the process of completing a task or activating a specific feature.

It doesn't all need to be in the user's face. Instead, a small visual cue that informs without taking over the entire experience will suffice.

Microinteractions

Typically used in individual elements, microinteractions provide users with instant visual feedback after an action is performed. They inspire confidence that an action was taken and that something happened as a result – while also adding a touch of joy.

They don't need to be sophisticated, like Twitter's heart animation , However, they should indicate some kind of feedback or response to the user's action. Just look at how subtle – yet charming – it is when a user does something as small as adding an item from one line to another:

OK, so when should we... avoid Animations?

We've just seen some situations where animations make a lot of sense. Let's explain the opposite conditions where animations generally contribute very little or nothing to the user experience. In other words, they become noticeable for bad reasons and it's probably best to leave them out of the equation.

Route transitions

Yes, we don't normally see this type of animation on product websites, but it's worth mentioning to understand why it doesn't make sense. These transitions work best on mobile apps due to the small screen area. On desktop screens, there's a much larger area to animate. To animate all the content smoothly, you'll need to set a longer duration than on a mobile screen. This simply irritates users, making them wait to see the content, as they're already used to seeing instant content visibility on the web. And in the worst cases, route transitions can not only be a distraction but also a serious accessibility concern. when it comes to sensitivity to movement .

• 

On initial page content load

You can do this on marketing websites when you want to educate users or shift their focus to a specific section. For product websites, however, it will again be annoying to see the same animation every time the user navigates between pages.

When it's unexpected

It's a good idea to consider the user's state of mind while they're using a specific feature. Is visual feedback expected where the animation is being used? Otherwise, it might confuse more than it helps.

For example, check out this calculator app. There's nothing new in the UI pattern when numbers are entered and calculations are performed. Users already know where to focus. There's no point in making users wait before seeing results or surprising them with something that provides no additional meaning or benefit.

When you're not sure how it works

It's important to keep in mind that not all devices, internet connections, and browsers are created equal in the eyes of the animator. - Eric Bailey This sums it up very well. in its deep dive into prefers-reduced-motionmedia consultation:

We also need to acknowledge that Not every device that can access the web can also render animations, or render animations smoothly. .When animation is used on a low-power or low-quality device with "technically" supported capabilities, the overall user experience suffers. Some people even... They deliberately seek this experience. as a resource.

The title above this quote is a wise reminder: a Animation is a progressive improvement. If we plan to use animation – especially those that threaten to dominate the experience – we have to consider at least one way to opt out of using it and whether the experience still works without the animation. prefers-reduced-motionIt's the best place to start.

When the purpose is unclear

Finally, I would say that you shouldn't add animations whenever you're not absolutely sure about their purpose. Superfluous animation can distract and do more harm than good. This tweet from 2018 is still very true:

How long should an animation be?

The length of an animation is just as important as the type of animation being used. Wait too long and the animation may seem to drag. Go too fast and interesting details of the animation may be lost (at best) or completely disorient the user (at worst).

So, how long should we set the duration of an animation? I'll give you a classic answer: It depends.

Generally, the greater the distance, the longer the duration.

Animations (like the ones we saw earlier) can be limited to a short duration. But if we're talking about a massive transition where an object is traveling a long distance, we might feel it needs a bit more to ensure things don't move too fast. But avoid using durations longer than 400ms.

See this example. Notice how the content takes a little longer to transition because it has a greater distance to travel. But also notice that it doesn't have to take that long. very Because the object that exits disappears into the object that enters, and the object that enters comes from a shorter distance, instead of making it travel across the entire screen.

This shows that even large animations can be optimized to appear shorter without getting lost in the mix.

Use a shorter duration when the user triggers the action.

This is important and a common mistake. If the user already expects something to happen – and the focus is already clearly where it should be – then it makes no sense to make the user wait seconds to complete what they already expected.

On the other hand, if the change is triggered automatically by the system, a longer duration makes sense, as it will allow the user to quickly catch up on the change that is occurring. Think of tooltips or modals that are not triggered by the user and do not require immediate attention.

Entrance and exit animations can have different durations.

Sometimes it makes sense to keep the animation of an object entering the view a little faster than the animation of an object leaving, especially when the user expects to see that change in content.

See the previous example of a dropdown menu. When a user clicks on it, they want to see the menu items immediately – at least, they wouldn't have to wait to see the menu items. When the user clicks, let the submenu pop up quickly and then smoothly exit when it's dismissed, to avoid distracting the user on their way out when it's no longer needed.

But this doesn't apply to large UI blocks. In larger blocks, in most cases, a duration greater than 200ms is required. In these cases, inverting the durations and allowing a block to exit faster than it was inserted ensures that it won't block the display of the existing page.

The animation length across the entire product should be consistent with each other and with the brand's personality.

I've come across many products where one feature has really good animations and another is simply too fast, too slow, or has no animation at all.

Even worse is when animations within the same feature are out of sync.

That's where having a style guide with well-thought-out animation guidelines that can be used consistently throughout the experience can be a great help.

How simple is too simple? Or how complex is too complex?

The complexity of an animation should be based on how often users are expected to encounter it, among other things we've seen so far. The more frequently users are expected to see it, the simpler the animation should be. This should supersede the previous rules of duration where necessary.

For example, the animation below would work in a main menu, but using the same striking effect in dropdown menus throughout the product is too much to comprehend. There's really a point to... decrease in returns In animation, just as there is in economics.

But hey, if this type of complex animation is used sparingly in intentional instances, then it can be incredibly delightful!

Yes, you can get creative with animations where there's a pending user decision or during data processing. This makes waiting times more engaging, such as when the network is interrupted or an incorrect password is sent.

Which attenuation function should you use?

Ease of use? Easy to get in? Easy to get out? Easy to get in and out? Any cubic Bezier curves?

Proper flexibility follows the laws of physics. Disney's animation principles They are the gold standard when it comes to this.

For animations of Prohibited , Use a jump effect if you want immediate user attention; otherwise, use a smooth acceleration (and deceleration, in that case) that is incremental rather than linear. The jump should reflect gravity. (Brandon Gregory's post on...) natural feeling animations It provides all sorts of examples that are in accordance with the laws of physics.

You can check this Synthesis From Adam Argyle on defining easings in CSS.

Lights, camera, and… intentional action!

Attention to detail is what separates excellent animations from average (or even broken) ones. If you're in the process of learning web animation or currently working on a project that requires it, I hope this post can serve as a useful set of basic rules to help you get the most out of your work.

Beyond the rules, I would also mention that good animations require time and practice. Of course, many of the things I've covered here are somewhat anecdotal and based on personal experience, but this is the result of developing an eye for animation after years of working with it. Learn, experiment, improve, and keep learning. Otherwise, you may end up with a collection of animations that provide poor user experiences and even harm your website's accessibility.