Animation isn't just for making your site look pretty.
There are practical – and sometimes quantifiable – reasons to add animation to your WordPress site. It could help you stand out from your competition, tell your brand story, design effective user interfaces (UI), and improve your site metrics.
Not completely sold yet? Take a look at these stunning WordPress websites. From a craft beer site, to an interactive Christmas marketing campaign, each one showcases different ways you could use Lottie animations to level up your next WordPress project.
1. Cerveja Trindade
Cerveja Trindade is a craft beer brand based in Lisbon, Portugal.
There’s a lot to appreciate about this website. It features illustrations that look hand-drawn (all Lottie animations!) that swim around the screen. A blinking Eye of Providence follows your cursor around – click on it, and it unfolds into a pyramid with navigation links. The site also uses scroll-based animation, where different segments of animation are triggered as you scroll down the website.
UX/UI designers Erika Riberio and Paula Rodrigues shared on Behance that the project was inspired by secret societies, surrealism, and symbolism. The branding has references to Freemasonry, which is associated with the birthplace of this craft beer.
2. One Night Stand Studios
One Night Stand Studios is an audiobook and voice arts creative studio for independent and self-published authors.
Load up the site, and you’ll be greeted with a desk and table lamp. Here’s the fun bit: each time you click on this illustration, it animates into a different state. At the same time, the background cycles through beautiful gradients, each representing day, dusk, and night. Pretty cool!
Okay, so how does this work? The desk and table lamp (and their various states of animation) are just a single Lottie file. Each time it registers a click, it plays a different segment of the animation, and applies a CSS class to change the background.
Want to implement something like this on your own site? With the Lottie Player, you can define how your animations should react to user actions like clicking, hovering, scrolling, and more. Check out the Lottie Player Interactivity Guide to get started.
3. Studio Vi
Studio Vi is a design and development studio that focuses on creating interactions through digital innovation.
A Lottie animation plays before the rest of the site appears. Using animation to indicate loading states can be helpful for sites that take longer to load. Instead of showing a blank screen (and risk losing your users), animation engages people and makes sites feel more responsive.
Studio Vi takes this a step further. It doesn’t just show you a generic loading indicator, but it loops over animated text that describes the agency: design, development, and conversational. It’s an interesting way of engaging users while telling what your brand stands for.
Studio Vi also uses Lottie animations to create dynamic hover states. When you hover over the links in the top navigation bar, fun, squiggly lines animate into view.
4. Fwd People
Fwd People is a brand and digital agency based in New York. The agency builds brands and websites, helps organizations drive growth, and creates digital experiences.
The site’s entire hero section is a single Lottie animation. It starts by greeting you with a ‘Hi’, while an animated smiley leads you to the rest of the sentence. Then it tells us what the agency does, in text that fades in and out in quick succession, with looping curves and dynamic lines, ending with a burst of confetti. It’s a fun, engaging way of showcasing what Fwd People is about.
While Fwd People uses animated text to create a scroll-stopping hero section, that’s not the only way you could use them. You could also use them to create fun 404 pages, indicate loading states, or animate your text-based logo. Check out the LottieFiles library for more animated typography inspiration.
5. Asian Legacy Library
The Asian Legacy Library is a global non-profit organization that locates and digitally preserves cultural wisdom heritage.
Its logo, which sits on the top left corner of the site, is a Lottie animation. It periodically shifts into its slogan, Preserving Timeless Wisdom, and back into its logo again.
Motion can be a great way to help users remember your brand, as moving images are more easily recalled than static ones. Other popular brands use this too – For example, when you think of Netflix, you can probably easily recall its animated ‘N’ (and iconic ‘ta-dum!’ intro sound) moving towards you before the start of a show. Similarly, Duolingo uses motion to bring its logo to life as you open its mobile app.
The Asian Legacy Library also uses other interesting UI animations. As you scroll down the page, the full-width background images fade out and reemerge in square pieces, almost like dynamic mosaic art. With WordPress, you can create scroll transitions using your theme settings or through an animation plugin.
6. Caesarstone
Caesarstone produces premium quartz surfaces for kitchen countertops, flooring, wall cladding, and more.
While Caesarstone sells “dreams set in stone”, there’s nothing immovable about its site. The hero section features a looping carousel of dramatic landscapes, product shots, and slow-motion video. Scroll down and you’ll see quartz tiles, text elements, and images slide into view.
Caesarstone uses Lottie animations as navigational icons. You can hover over each of them to trigger an animation.
Microinteractions like these can serve two purposes: firstly, they help you navigate a site. In this case, they tell you that these icons are clickable, and will lead you to other pages. Secondly, they’re just really satisfying! It feels good to see visual feedback when you interact with a website or mobile app. Think of any time you’ve ‘liked’ something on Twitter on Instagram – seeing the heart icon pulsate creates a small moment of delight.
But Lottie animations aren’t the only way to create microinteractions. If you’re working with WordPress, your theme might allow you to create hover or click effects for buttons or text links.
7. Happy Christmas from KDC
Happy Christmas from KDC is an interactive Christmas greeting by Kennemer Duincampings, an organization that runs three campsites situated in the Dutch sand dunes. Fun fact: this website was developed by Studio Vi, which we’ve featured as number three on this list!
The website takes you on a journey through the three campsites, while announcing the activities and amenities you can expect to see in 2022. The graphical elements, like the vehicle and background, were animated in Adobe After Effects then exported with Lottie. To create a 3D effect, Studio Vi used layers of animations that moved at different speeds as you scroll.
Immersive experiences like these can be valuable marketing content – Studio Vi shared that 25% of users went on to visit one of the three campsites featured in this campaign.
What will you build with WordPress and Lottie?
While these sites may need designers or developers to put together, you don’t have to be one to start adding animation to your WordPress site. With LottieFiles, you can customize and embed thousands of free animations on WordPress.
It’s easy with the LottieFiles for WordPress plugin. Once you have this WordPress animation plugin installed, just search for any animation and insert it in a single click. You can adjust background colors, trigger animations on user interactions, create scroll-based animations and more – animating a WordPress site has never been easier!
And if you do happen to be a designer or developer, you’ll be glad to know that LottieFiles has tons of integrations with your favorite tools – like Figma, Adobe XD, Adobe After Effects, and Visual Studio Code – to make designing, testing, and implementing animations much easier. If you need help, check out this guide to adding and using Lottie animations in WordPress.
In addition, WordPress makes it easy to customize UI animations, especially through its rich ecosystem of themes and plugins, even if you can’t code. So go on – we hope this showcase has inspired you to build something amazing!
