WordPress Lottie Tutorial: Best Plugins to Use Lottie on WordPress

WordPress Lottie Tutorial: Best Plugins to Use Lottie on WordPress

Looking for an easy way to add Lottie animations to your WordPress site? Or confused by what the heck a Lottie is and why you should care?

Whether you’re already familiar with Lottie animations or you have no idea what that term means, this post is going to help you out.

First, I’ll start by explaining what Lottie animations are and how they can be a useful tool for your WordPress site. Then, I’ll show you step-by-step how to set up WordPress Lottie animations on your site using two different methods.

If you’re already familiar with Lottie animations and are only here for the tutorial, you can also click this link to jump straight to the tutorial part.

What Are Lottie Animations?

In a nutshell, Lottie makes it really easy for you to add cool animations to your WordPress site (or any other website).

It’s a library developed by the folks at Airbnb that lets you parse Adobe After Effects animations that were exported as JSON with Bodymovin. Then, you can natively render them on your website (or in a mobile app).

Honestly, a lot of the talk about Lottie goes over my head because I’m not an engineer/designer. The only thing you really need to know is that Lottie makes it easy to add animations to WordPress.

If you want to learn more about the format itself, you can check out Airbnb’s introduction post.

Examples of Lottie Animations

The best way to figure out what Lottie animations are and how they might be useful is to experience them for yourself.

To do that, you can head to the LottieFiles website and take a peek.

You can browse through a ton of different animations for various use cases and niches. Many of these animations are free to use. However, they are licensed under the Creative Commons – Attribution license, which means you can use them for free, but you do need to provide attribution on your website.

How Do Lottie Animations Work?

As I mentioned earlier, Lottie animations use JSON as their format. Basically, this means that they don’t work like a GIF or “regular” animated image. Instead, they’re a big code file that looks something like this:

Lottie animation code

Yes, this huge collection of random-looking JSON code is what turns into those cool animations on the front-end of your site.

However, because Lottie animations use this format, you can’t just go and add them to your site like you could a GIF. That’s where the rest of this post comes into play…

How to Use Lottie Animations on WordPress

Since this is a WordPress tutorial, you can probably guess where this is going…

The easiest way to add Lottie animations to WordPress is with – wait for it – a WordPress Lottie animation plugin.

In this tutorial, I’ll show you how to use two separate plugins to get the job done:

  • WP

[…]

 



This article was written by Colin Newcomer and originally published on Learn WordPress with WPLift.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top