Take a look at these engaging websites, and something quickly stands out: everything moves. From dynamic backgrounds, to fancy page transitions, to interactive illustrations – animation is trending.

But animation isn't just for award-winning websites. You can add motion to your WordPress site too, even if you’re not a designer or web developer. Besides making your site look good, it can also have a real impact on your users and business bottom line – here’s how.

1. Stand out from your competition

Evil Twin, a tech and startup digital marketing agency, uses a dynamic hero image in its WordPress website

Here’s what web development in the ‘90s looked like: rent a web server, write HTML, upload your files to the server via an FTP client, add blinking text in questionable colors for flair, then cross your fingers and hope for the best. In other words, getting a site up was for the very technical and the very patient.

But now with platforms like WordPress, it’s really easy to design and launch a website. The good news is that you could get a blog, a marketing site, or an eCommerce store online within minutes – even if you can’t code or design. The bad news? Everyone else can too. There were 1.88 billion websites online in 2021, of which WordPress powers a staggering 42%. That’s a lot of competition.

Adding animation to your WordPress site can help you stand out against a sea of mostly static websites. That’s because moving images are more easily recalled than stationary ones. For example, Evil Twin, a tech and startup digital marketing agency, uses a dynamic hero image in its WordPress website. The bouncing, anthropomorphic icons use just a little animation, but are engaging enough to get a user to stop and look. That, combined with its strong visual identity and witty copy, can help it rise above the average marketing agency.

2. Tell your brand story

Langmobile uses engaging Lottie animations of children learning, playing, and exploring

Would you rather have a pair of Nike or Adidas shoes?

Your answer may have nothing to do with each pair’s heel collar stiffness, cushioning elements in the midsole, or material breathability – in other words, nothing to do with the actual shoe quality itself. Instead, you probably answered based on how you feel about each brand.

That’s the power of a brand story.

A brand story is everything about your business – such as its history, marketing, voice, values, the way it communicates with audiences – that inspires an emotional reaction, and eventually leads customers to purchasing your product.

And what better way to connect emotionally than through animation? For example, take a look at Langmobile, a language-learning service for families. Its website, which is powered by WordPress, uses colorful Lottie animations of children learning, playing, and exploring. It doesn’t just tell us that it’s “committed to fun”, it quite literally shows us through playful illustrations. In this case, motion can be a powerful marketing tool to reinforce your brand voice and visual style.

3. Design effective user interfaces

Armadillo uses an animated hamburger icon in its WordPress-powered mobile user interface

Animation helps design effective user interfaces. It draws your users’ attention to the right elements, and builds expectations about how your website will function. For example, you could use animation to:

  • Provide feedback in micro-interactions - Motion can prompt a user when a successful (or an unsuccessful) interaction has taken place. For example, this could be a ‘heart’ button that turns red when it’s clicked, or a toggle that moves when it’s activated.
  • Include hover states - What do you do to find out if something is clickable? You’d hover your cursor over it. Animating elements such as buttons or links when they are hovered over lets your users know that they are clickable.
  • Give navigational cues - Motion gives your users cues about where to go next. For example, take the popular hamburger menu, which is triggered by a ‘hamburger’ icon (i.e. three vertical bars). It’s common for the menu to fade into focus or slide from one side of the screen, instead of appearing suddenly, which can be disorienting. The hamburger icon might be animated into a ‘close’ icon, which tells the user that they can click on it again to close the menu.

4. Improve your WordPress site metrics

Edelmade, a creative studio, uses a loading animation on its WordPress site

Nobody likes a slow site. In fact, long loading times could directly affect your business earnings. A one-second delay in mobile site load times can impact conversion rates by up to 20%.

Besides that, the longer your page takes to load, the higher your bounce rate – that’s when a user leaves your page without taking any action. According to Google, if your site success depends on users accessing other pages on your site (for example, product pages or news articles), then you won’t want a high bounce rate.

While the most obvious solution is to optimize your site for faster loading times, you could also use motion to indicate loading states. Instead of showing a blank space while your elements are loading, you could show an animated loading icon or screen. This occupies your users while they are waiting, so you don’t risk losing them. It also makes a site feel more responsive, even if it doesn’t actually make it faster.

In short, animation could increase the time spent on your site, reduce your bounce rate, and potentially increase conversions.

So how do you add animation to your WordPress site?

Here’s the kicker: you don’t need a team to design or hand-code animations from scratch.

With the LottieFiles for WordPress plugin, you can search for free animations and insert them in a single click. You can even adjust background colors, trigger animations on user interactions, create scroll-based animations and more.

When it comes to user interface animations – such as loading animations or micro-interactions – your WordPress theme may already have support for them. You may need to access the WordPress Customizer to toggle these settings on or off. If your theme doesn’t have support for them, consider switching to another theme or getting a plugin that will give you the functionality you need.

So go ahead, start making motion magic with Lottie and WordPress – we can’t wait to see what you come up with!