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 Bodymovin – this free plugin lets you add Lottie animations and then embed them anywhere on your site using a shortcode.
  • Elementor – Elementor Pro includes a dedicated Lottie widget, and you can also find free extensions.

But before we get to that, you first need to find the Lottie animation that you want to use and get its JSON…

1. Pick an Animation and Find Its JSON File

To kick things off, you need to find an animation to use.

The easiest way to do this is to use the LottieFiles website that I mentioned earlier. Many of the animations on this site are free and already use the proper Lottie JSON format, which means they’re super easy to include in your content. Just remember that the license on the free animations requires that you give attribution.

You can also find lots of other sources that provide After Effects animations that you can export using the Bodymovin plugin. However, this adds some extra complexity, especially if you’re not familiar with After Effects. One good place to look for this approach is Envato Elements.

However, I’m going to stick to LottieFiles because it’s by far the easiest option. Go to the Animations area to find all of the free animations.

Once you’ve found one you like, click on it to open it. I picked this animation of a car driven by WordPress wheels – I’m not sure why it exists, but I’m happy that it does:

WordPress Lottie example

Then, click the Download JSON button to download the .json file to your computer (you’ll need to register for an account to download the file, but it’s free).

2. Add Lottie Animation to WordPress

Once you have the JSON file for your animation, you’re ready to display your animation in WordPress.

Again, I’m giving you two options here:

  • WP Bodymovin – lets you embed your animation anywhere using a shortcode.
  • Elementor – lets you add your animation to any Elementor design.

WP Bodymovin

To get started, install and activate the free WP Bodymovin plugin from WordPress.org. Then, go to Animations → Add New and follow these steps:

  1. Give it a title to help you remember it.
  2. Upload the JSON file using the JSON Data file picker.
  3. Click Publish to upload the file and generate the preview.

WordPress Lottie plugin

Now, you should see a live preview of your animation.

Below that, choose your Animation renderer – I recommend leaving it as SVG. Then, use the Shortcode generator to further configure it. For example, you would check the Loop animation box to make your animation repeat over and over. You can also add lazy loading and stop the animation when it’s out of the viewport to improve performance.

Generate shortcode

Once you’ve made your choices, copy the shortcode. Then, you just need to add that shortcode to the location where you want your animation to appear:

WordPress Lottie Tutorial: Best Plugins to Use Lottie on WordPress 1

And then you should see it on the front-end of your site:

WordPress Lottie Tutorial: Best Plugins to Use Lottie on WordPress 2

That’s it! Just repeat the process to add more animations.

Elementor

If you have Elementor Pro, Elementor already includes its own Lottie animation widget that you can use in your designs. If you don’t have Elementor Pro, you can also find free Elementor add-ons at WordPress.org that give you a Lottie widget for free. For example, the free Animentor plugin.

We use and recommend Elementor Pro, so that’s what I’ll use for this tutorial.

To get started, all you do is drag over the Lottie widget where you want your animation to appear. Then, you can upload the JSON file directly in the widget’s settings (Elementor will warn you that it needs to enable JSON uploads to do this – WordPress disables them by default):

Add Lottie widget in Elementor

And that’s it! You should see your Lottie animation in your design.

To control how it works, you can expand the Settings section in the widget to control triggers, looping, playback speed, lazy loading, and more:

Elementor Lottie widget settings

Start Using WordPress Lottie Animations Today

Lottie animations are a cool way to add some fun and engagement to your WordPress site. However, because they’re JSON files, it can be tough to understand how to add them to your WordPress content.

In this post, I’ve detailed two easy ways to do that. For an approach that will work with any setup (including the block editor), you can use the free WP Bodymovin plugin.

Or, if you’re already using Elementor, I recommend just using Elementor Pro’s dedicated Lottie widget to get the job done.

Do you still have any questions about how to use Lottie in WordPress? Ask in the comments!

Keep reading the article at Learn WordPress with WPLift. The article was originally written by Colin Newcomer on 2020-10-20 03:00:10.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

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

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top