5 top website animation techniques for your web design.

Videos and animations make life easy for website users. They convey information quickly. They’re super engaging. And — when done right — they’re a joy for website visitors to experience.

This helps to explain why website animations are everywhere now. Browse the web and you’ll find sites using a variety of animation techniques to engage website visitors and encourage conversion.

Animations are great for the user experience. They help you to achieve your business goals, too. Website animations can:

• Help your site stand out from competitors with static websites
• Keep users on your site for longer — 82% of video marketers say that video has improved dwell time
• Highlight what’s important, guiding users further down the conversion funnel
• Convince users to buy — 82% of people have been convinced to buy a product or service by watching a video

There are lots of great reasons to incorporate animation and motion graphics into your website. In this post, we take a look at five standout animation techniques. We also look at the dos and don’ts to bear in mind when adding animation to your site.

5 top website animation techniques

• Animated video
• Animated micro-interactions
• Loading animations
• Content carousels
• Animated backgrounds

Animated video

Video is super engaging for website users. Putting a video on a website landing page can increase conversions by 18%. That’s because it helps you get your message across clearly, quickly and easily.

Animated videos come in various formats, including 2D, 3D and stop motion. Whichever type of animated video you choose, you can use it to give website users the information they need to convert.

You can use animated videos to give an intro to your brand or way of working. You can explain a complex idea in a way that makes it easy to understand. Or maybe you want to showcase your product and its features in crystal clear detail.

But why choose an animated video over a live-action video? There’s one really good reason. An animated video is more practical and versatile. That’s because it’s much easier to update once it goes live.

It may be that your service or product offering changes. Or that — once you’ve started to gather engagement stats — you find that users tend to stop watching the video at the same point every time.

In either case, you can make changes to an animated video quickly and easily, to ensure it represents your offering and better engages viewers.

Animated micro-interactions

Micro-interactions are small moments of interaction between a user and your website. They’re subtle animations that provide visual feedback to users and help guide them through your website.

Most micro-interactions are triggered by a user action. A user might swipe, click, scroll or hover on your website to activate the animation.

Examples of website micro-interactions include:

• A clickable icon that changes or moves when a user hovers over it
• A password strength bar that changes from red to orange to green as a user types their password
• A slider bar that shows whether a feature is switched on or off
• Animated Lottie files that celebrate the completion of a task.
• A call to action button that animates to show that a user action has been successful

Animated micro-interactions bring your website to life. They turn mundane website tasks into memorable experiences.

These subtle animated experiences can also help to pull user attention to the places you most want it. They make it easy for users to scan and navigate your website. And they make it easy for you to establish a clear visual hierarchy.

Loading animations

Today’s website users expect pages to load quickly. In two to three seconds to be exact. And they tend to lose interest in your website quickly if you don’t offer a fast and convenient experience.

Whether a slow loading speed is due to an issue with your site or with the user’s internet connection, you can use website animation to make the wait more tolerable. A good loading page animation distracts your site users and gives them something engaging to enjoy while your page loads.

Loading page animations work best when they fit with your brand identity. And when they’re accompanied by text telling users why they’re having to wait — or what amazing stuff they can expect when the page finally loads.

For example, Expedia has a loading page that appears while users wait for the results of their flight search. This loading page features an animated aeroplane flying through clouds. In the Duolingo app, the animated Duo owl character walks and sings above language-learning tips while users wait for their next lesson.

Another way to use page load animations is with a “tightrope”. This is a type of loading page animation that tracks how long content will take to appear. It’s effective because users know they won’t be waiting indefinitely and are more likely to stick around.

Get it right and loading page animation will help to reduce your bounce rate and improve your conversion rate, too.

Content carousels

One of the simplest and most popular ways to add website animation to your site is with some well-planned content carousels. You tend to find carousels near the top of a web page. These animations are often populated with text, images, links or videos.

A carousel is the ideal place to feature your most important information, like key products and services. They’re also a great place to feature info that’s likely to change frequently. For instance, you might want to add seasonal sales and time-sensitive promotions to an animated carousel.

A great thing about content carousels is that they can be customised to function in different ways. You can have a carousel transition through content automatically or allow the user to click through slides at their own pace.

Animated backgrounds

Another place to put website animation is in the background of your web pages. This creates another layer of depth and makes your site feel dynamic right from the top of the page.

You can use background animation to set the tone of your site and convey your brand personality. Whether your brand is inspirational or knowledgeable, creative or playful, your background can help reflect this.

Types of animated backgrounds include animated patterns and looping videos. You can also change background colours or gradients as users scroll.

Parallax scrolling is where background elements move at a different speed to foreground elements. This creates a 3D effect which helps to immerse users in the website experience.

However you choose to use animated backgrounds, just be sure to use them subtly and sparingly. It can be an unwelcome distraction for website users when used to excess.

You can see some great examples of animated parallax scrolling on the OK Alpha site, the Superpower site and on this NASA Prospect storytelling website.

A few dos and don’ts of website animation

When you start to look at websites with animation, a static website starts to feel a little boring in comparison. We quickly get used to the dynamic user experience that animated websites provide.

But to ensure that animations support your website goals (and don’t get in the way of them), there are a few important rules to follow. Here are some dos and don’ts when adding animation to your website.

Don’t sacrifice site speed

Firstly, as any good web design and development agency will tell you, animation can make your website clunkier. This can contribute to slow loading speeds. So, if you’re looking to add animation to your site, you need to use efficient animation techniques and some clever coding to avoid sacrificing site performance.

Don’t forget responsiveness and accessibility

You need to ensure that your website animations work for all users, across all devices and browsers. That means adapting animations so they’re responsive to the small screen sizes and touch interaction of mobile devices. It also means giving users the option to disable animations if they want to, to improve website accessibility.

Don’t overdo it

When it comes to website animation, you can have too much of a good thing. The right animation in the right place enhances user experience and drives conversions. But go overboard and you’re more likely to frustrate website visitors than impress them.

Do use animations to highlight key elements

Use animations purposefully to enhance the user experience and encourage conversions. Use them to highlight key elements, drawing user attention to important information or a call to action.

Do be consistent

Animations should fit with the look and feel of your website and branding. Stick to the same style throughout your site and use predictable animation patterns to prevent your site becoming cluttered and confused.

Do use the latest animation technologies

When designing animations, use the latest animation technologies. Up-to-date technology allows you to create animations that load quickly and offer the best possible user experience. Many web designers make use of JavaScript, HTML5 and CSS3. There are also some powerful all-in-one tools such as Adobe Animate and K-3D.

One of our favourite tools here at Radical is Lottie. With Lottie, we can create animations with small-size files and text-based code, which means faster rendering times on your website.

Bringing your website to life with animation

Website animation can take many forms. It all depends on what you’re hoping to achieve.

You can use it in video form to educate and inform site visitors. You can use it more subtly, to catch user attention and encourage them to engage with your pages.

Website animation is also a useful way to give visual feedback, guiding users through your website and funnelling them towards a conversion.

If you’ve still got a static website, a touch of animation could be just what you need to boost the user experience and make more sales.

Here at Radical, our creative animators create exceptional website animations. So if you feel your site needs to move with the times, get in touch with our team to explore ideas and options.