Even just a few years ago, website animations were something new and different. They added an unexpected, “how did they do that?” element to a site. Today, though, animations have become the norm, almost to the point where site visitors actually expect them, and might even consider a site that doesn’t have at least some animated element to be outdated or stale.

This doesn’t mean that you can just add an HTML5 banner to your site and expect that it will surprise and delight your visitors. Animation can be an effective way of drawing attention to specific elements, making it easier for your users to navigate the site, or of providing useful information, but you have to put some thought into how you use it and which elements you opt to animate. Otherwise, it will be a waste of time and effort — or even annoying.

One place to start when considering where to add animations to your site is by looking at current trends. While animated banners are still a useful marketing tool, adding other animated elements to your site may actually be even more beneficial to your business. As you work on a site redesign, or just want to refresh some of the older elements of your site, don’t overlook these trends in animation.

Hover Animations

When you have interactive elements to your site, such as downloads, or a number of distinct sections, hover animations are an excellent way to tell users about the interactivity, and to get them to click on something that they might not have otherwise realized is a clickable element.

For example, if you offer a selection of resources to download, a hover animation over the icon for that download could open up to reveal more information about the download and a response button. Not only does this give users information that they are looking for without cluttering the page with details, it also adds a fun, interactive element.

Background Animations

Another trend to consider is a background animation. When used properly, these animations can help draw attention to certain aspects of the site and add a level of interest, but it must be done slowly and subtly to avoid being distracting.

For example, a building developer might use a background animation to show the process of building a property from start to finish using a background animation. This tends to be one of the more complex types of animation to use, since you will need to spend time experimenting with the frame rates to ensure a seamless experience that doesn’t detract from the rest of the page, but when done well, it can be a very effective aspect of the site.

Scrolling Animation

Long scrolling web pages continue to be a popular choice for websites that don’t necessarily lend themselves to multi-page navigation. Often, the success of these scrolling sites depends on the quality of the animations being used.

For example, if you want to illustrate a process, or how your company or product works, animating that process and displaying it via a long scrolling page can be effective. The success of this type of website depends in large part on the quality of the animation, so capitalizing on this trend requires that you invest a great deal of time into getting the animation right.

Navigation Animation

Navigation animation has long been a popular choice, and has become even more prevalent as designers work to make sites mobile friendly. One of the most common forms of navigation animation is designed to save space and reduce the clutter on the page, and that is the so-called “hamburger” navigation button (the three lines that are the universal symbol for “there’s more here) that opens up to reveal a larger menu of options. The idea of this type of navigation is both to limit clutter, but also to help prevent jarring transitions between pages.

There are many different ways that you can use this style of animation, from a simple slide menu to more elaborate pop-up menus, but the effect is the same, allowing for a simple, interactive design that adds an element of freshness and fun to your site.

Loading Animations

Everyone knows that internet users are an impatient bunch, and aren’t generally willing to wait more than a few seconds for a web page to load. However, by adding a loading animation — an animation that indicates the page loading progress in some way — you may be able to buy yourself a bit of time. Loading animations can be distracting (a good thing as long as they don’t take too long) and they help engage your audience.

Just be sure that the animation mimics the style of your website, and is simple and not too cumbersome. Try turning it into a branding opportunity; animating your company logo during page loading is a great way to reinforce your brand while reaping the benefits of a loading animation.

Adding one (or more) of these animation trends can help your site feel fresher and more modern, while still aiding in navigation and making your site efficient and easy to use. Best of all, most are not difficult to add, making them an easy fix for a stale or outdated site.