How to animate Lottie Animation on Scroll in Divi

Lottie is no doubt a great tool when It comes to adding beautiful & modern motion animation to your site without Slowing Down your Page speed, and we’re also working hard on making our Lottie Module more stable and perfect so you can get more creative with it.

And in today’s Short Tutorial, we’ll see how to animate the Lottie Animation on Scroll, already sounds cool, right? If you want to learn the basics of the Lottie Module and how to use it then you might wanna follow this article.

Let’s Get Started

First of all, you have to enable the Divi Builder on the Page you want and select any animation from the Lottie Files website. Below is the Animation we’ll use and we need to download the Animation’s .Json file.

Okay, as we have chosen the animation it’s time to put it on your site. Simply add the “Supreme Lottie” Module

Now you need to upload the JSON file. Simply click the “Upload” button in the Module Settings. You don’t need to worry about JSON file uploads because Divi Supreme has enabled it for you. You can go to Plugin Settings -> Misc for more info about JSON file upload.

Once you’re done with that you’ll need to Enable the Animation Trigger to animate on Scroll. Enable the “Trigger” Option and change the method to “Play Animation on Scroll”.

And that’s it your animation will now play on Scroll. This is how it looks.

Wow, the animation will play on Scroll Down and Reverse on Scroll up. Looks so cool, right? We’ve added the Sticky On Scroll to the above animation as well.

An there you go that’s how easily you can animate Lottie Animation on Scroll. The demo we showed is a simple one you can find a better animation or Hire an animator on Lottie Website.

Let us know what you think about this creative idea in the comment section below, we’d love to hear from you.
Have a great day!

How to access the Divi Lottie Module

To get all the features of Lottie Module, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Read More content extension in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

The Lottie module can also be found in our Lite/Free version of Divi Supreme but with limited options.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.


Submit a Comment

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

Divi Supreme
Divi 5 is coming soon, and we are diligently converting all our Modules to the Divi 5 Infrastructure. Take a look at a Quick Demo →
Divi 5 is coming soon. Take a quick look at a demo of our modules in Divi 5.