How to use Lottie animations In Divi

Lottie animations are becoming increasingly popular, with more designers and website developers opting to use them over traditional GIF animations. As such, if you too want to use Lottie animations on your Divi website, then here is a detailed guide to help you out.

Lottie animations bring in a lot of benefits over GIFs and other traditional animation formats. However, it is still not natively supported by WordPress nor Divi. As such, you can’t just upload or embed Lottie animations onto your posts and pages. But that being said, adding Lottie animation support isn’t that hard either and will only take a few minutes.

And to help you out, we have put together a step-by-step guide on how to add Lottie animations to your Divi website.

But first, let’s quickly answer a few basic questions – what are Lottie animations, and why should you use them?

What is a Lottie Animation?

Simply put, Lottie animations, also known as “Lotties,” are JSON-based animation files.

On a more technical level, Lottie represents a library for Android, iOS, Windows, and the Web used for parsing JSON-based animations created in Adobe After Effects with Bodymovin.

But what does all of this mean? And how can Lotties help you?

Why should you use Lottie Animations?

Compared to GIFs, Lottie animations bring in a lot of advantages to the table. Here’s a quick overview of the various benefits it has to offer:

• Lottie animations offer cross-platform support. Apart from using it on the web, designers and developers can also use it on mobile platforms running on Android and iOS and even on desktop apps for Windows and Mac.
• The files are resolution-independent. As such, you can resize them without loss of quality – similar to vector graphics.
• Lotties are super small in size and far lighter compared to PNGs and GIFs. As such, websites that switch to Lotties will require less bandwidth and therefore experience faster loading speeds.
• Lottie animations mix Vectors and Raster elements to expose the animation parameters and use them as targeting elements. This allows you to create interactive animations that can be manipulated during run-time.

So, now that you have an idea of what Lottie animations are and their advantages over the normal Divi images, let’s talk about how you can add Lottie animations to your Divi website.

How to use Lottie Animations on your Divi website?

As mentioned earlier, neither Divi nor WordPress offers native support for Lottie animations. But that being said, like all your other problems related to WordPress, there’s a plugin to fix this one as well.

The WordPress repository is filled with tons of plugins that will help you easily add Lottie animations to your posts and pages. Whereas Divi users can take to the Divi marketplace, where they will find a number of Divi extensions that come with a “Lottie Animation module” compatible with the Divi Visual Builder. A few of these Divi extensions are:

• Divi Plus
• ConKit Pro
• Divi Supreme Pro

If you own any of these Divi Extensions, then you already have a Lottie animation module in your Divi module library. But if you don’t own any of these, then we recommend getting Divi Supreme Pro.

For $79, Divi Supreme Pro gives you access to over 50 powerful Divi modules and over 10 premium Divi layouts. What’s more, it also has a free version – Supreme Modules Lite with 20+ premium modules, including the one for Lottie animations.

Divi Supreme Modules Lite

As such, if you are tight on budget and want Lottie animation support on your Divi website for free, we recommend getting the Supreme Modules Lite WordPress plugin. Likewise, we have put together a detailed guide that goes over every step, starting from installing this plugin to adding Lottie animations on your Divi website.

So without further ado, let’s get started:

Disclaimer: If you are using a different Divi extension for the Lottie animation module, then some of the settings and options are going to vary. However, the overall idea is still the same, and the other modules should also have the exact same features – with a different name or in a different settings tab.

Step 1: Get the Lottie Animation File

First things first, we need to find  Lottie animation to add to our Divi website. To do this, head over to LottieFiles.com – an online library where you can find and download Lottie animation files for free.

Create a new LottieFiles account and then go to the Discover>Free Animations section. Here you find hundreds of free-to-use Lottie animations that are “created by the community for the community.”

LottieFiles

You can scroll through all the available Lottie animations, filter through them using tags, or just search for them using the search bar. Once you find a Lottie animation that you like, select it.

Inside, you will find options to change the animation speed, background colors, etc., to personalize the animation to your likings.

Lottie File Animation Customization

Once you have configured the animation settings, you can now export it for use on your Divi website. To do this, you can either download it as a .JSON file or copy the “Lottie Animation URL.”

Get the Lottie Animation File

Once you have the Lottie Animation file, head back to your WordPress website. It’s time to get the Divi module for adding Lottie animations.

Step 2: Install Lottie Animation Module for Divi

Now, to add the Supreme Modules Lite plugin, login to your WordPress dashboard, and from the left-hand sidebar, navigate to Plugins>Add New and then search for “Supreme Modules Lite.” Now install and activate the plugin highlighted in the image below:

Install Divi Supreme Modules Lite

Once installed, all of its modules will automatically get added to the Divi module library.

Alternatively, if you plan on getting one of the premium Divi extensions, then head over to the Divi marketplace. From there, search for “Divi Supreme Pro” and click on the “Buy This Item” button. Once the purchase is complete, you will be able to download the extension from Account > My Downloads in your Elegant Themes account.

The extension will download as a .zip file.

Now login to your WordPress backend dashboard, and again navigate to Plugins > Add New from the lefthand sidebar. But this time, click on the Upload Plugin as shown in the image below.

Upload Divi Supreme Pro plugin

Click on Choose File and select the .zip file you just downloaded. Now click on the “Install Now” button to install the plugin on your Divi website.

Step 3: Add the Lottie Animation Module

With the plugin installed and activated, it’s now time to show you how to add Lottie animations on your Divi website.

To do this, first, open a post or page in the Divi Visual Builder, where you wish to add the Lottie animation module. Next, click on the “Add New Module” in the editor. In case you don’t remember, it’s the black-colored “+” button within the “Section” and “Row” areas.

Next, type in “Lottie” to search for the Lottie animation module.

Add Supreme Lottie Module

Needless to say, since we are using the “Supreme Modules Lite” plugin, the name of the Lottie animation module here is “Supreme Lottie.” However, if you installed some other extension like “Divi Plus” or “ConKit Pro,” the name of the module will be different.

Now, with the Module added, you can either paste the Lottie animation URL in the provided field. Alternatively, you can also upload the Lottie animation file as a .JSON. For the sake of this tutorial, we will add it using the URL.

Add Lottie Animation

And there you have it. The Lottie Animation is now added to your Divi website. In the next step, we will show you how you can tweak and customize the animation behavior.

Step 4: Configure the Module

As you can see, the Supreme Lottie module gives you a lot of features to control the Lottie animation. You can find all of this under Content>Supreme Lottie inside the Module settings.

Supreme Lottie Module Settings

From here, you can choose whether the animation will keep on looping or stop after one cycle is complete.

Second, you can set a “Delay” period. The animation will begin after the specified seconds have passed.

Next, you have the “Direction” option. From here, you can configure the animation to follow either a “normal” or “reverse” flow.

After that, you get a slider that lets you configure the speed of the animation. You can set it anywhere between 0.1 to 2.5 times the actual animation speed.

And then, the final option lets you configure the viewport. It gives you a slider from 0-100%. 0% means that the animation will only start if the file is at the center of your viewport. Whereas 100% means you can see the animation even if it’s slightly in your viewport.

Once you are done configuring the animation from the module settings, you can adjust its size by dragging it from the edges, as shown in the GIF below.

Resizing Supreme Lottie Module

Wrapping up

And that’s it! You now know how to add Lottie animations to your Divi website. We hope you found this guide useful and that it helped you make your site more fun and lively.

As you can see, the entire process is super simple and straightforward. And with the Supreme Modules Lite plugin, it is also free.

But that being said, if you decide to use some other plugin or Divi extension, then the steps and options will vary from what we have shown here slightly. In that case, if you run into any sort of issues, leave us a comment below. We will try our best to help find a fix for you asap.