With Divi 5’s Lottie Module, you can tie motion to the scroll, letting visitors control how the animation plays as they move down the page. This makes sections feel interactive and works well for timelines, hero banners, or sales campaigns where you want to highlight a message with movement.
In this tutorial, we’ll walk through how to set up a scroll-based Lottie animation in Divi 5 and share a few examples you can adapt to your own designs.
What Is The Lottie Module In Divi 5?
Lottie is an open-source animation format developed by Airbnb that renders vector animations in real time using JSON. Rather than exporting animations as heavy videos or pixelated GIFs, you can use JSON files that stay crisp at any size, load quickly, and scale smoothly across devices.
The Lottie Module in Divi 5 enables you to integrate these animations directly into your layouts.
Subscribe To Our Youtube Channel
To get started, simply add the Lottie module and upload a JSON file, or paste the Lottie file URL. Then control how and when the animation plays. This includes options for autoplay, looping, hover triggers, and scroll-based playback, among others. You can even combine with Divi’s Interactions to mirror mouse movement, add presets, and more.
Because Lotties are resolution-independent, they scale perfectly on both mobile and desktop devices. They’re also flexible, which means you can drop them into a hero header, pair them with blurbs, or even use them as background elements behind text.
Divi 5’s Lottie Module makes it easy to add more engagement and interactions to your designs, helping visitors notice key details and stay connected to the story you’re telling.
Learn Everything About Divi 5’s Lottie Module
How It Works
To use the Lottie module in Divi 5, you need to make sure of two things:
- You have the Lottie JSON file of the animation you want to use.
- You can upload JSON files to your WordPress site without issues.
If you can design your own Lottie files, that would be great. But if you can’t, don’t worry about it. There are many free platforms, like LottieFiles, where you can find animations for your website.
Simply search for your animation and Download It.
You’ll get a JSON file that you can upload to your WordPress site. But to be able to do it successfully, you’ll need to modify some settings.
By default, WordPress doesn’t allow JSON uploads for security reasons. If you try to upload directly, you’ll see a file type error.
The easiest workaround is to enable JSON uploads using the File Upload Types by WPForms plugin, which allows additional MIME types, including JSON. Once the plugin is activated, search for ‘JSON’ in the Add File Upload Types list and enable the option.
Scroll down and Save Changes. Your JSON uploads will no longer show an error.
Once you’ve successfully uploaded your Lottie file, it’s time to use it for page designs. Inside the Divi Builder, add the Lottie module.
Then, click on Upload to add the Lottie animation you downloaded.
You can also add the Lottie URL from the original source, but this method can be risky. You don’t know when the creator takes the Lottie down from the platform, so it’s better to have it uploaded to your setup.
Notice some Lottie controls under the Upload option?
These let you decide how your Lottie should behave:
- Trigger Animation: Control when the animation begins. Options include On Load, On Hover, On Scroll, On Click, and Scroll to Animate.
- Loop Animation: Decide whether the animation repeats continuously or plays just once.
- Animation Speed: Adjust the speed at which frames progress. It helps sync animation timing with the page’s flow or user actions.
- Direction: Determine whether the animation plays forward from start to finish or reverse from end to beginning.
- Play Mode: Set how the animation behaves when triggered.
And that’s it. Once you configure the settings, the animation will render immediately inside the Divi builder, and you can adjust its size and placement using Divi design options.
Among all these controls, the one that unlocks scroll-based motion is Scroll to Animate. This option ties your animation frames directly to the visitor’s scroll position, allowing them to control how the motion unfolds as they scroll down the page. Since this tutorial is about scroll-based animations, we’ll use this option for all our builds.
In the next section, we’ll set up different Lottie animations using Scroll to Animate. For that, you need the latest Divi 5 version installed on your website.
Creating Scroll-Based Discount Reveal Upsell Offer In Divi 5
There are many use cases of scroll-based Lottie animations, but one of the most useful ones might be the hype build-up with an upsell offer. For this walkthrough, we’ll build a discount reveal section like the one below.
It uses confetti and bold text to unlock a special offer as the visitor scrolls into view. This animation works perfectly for upsells, guarantees, or limited-time promotions.
1. Upload The Lottie JSON File
The above design uses a confetti background, which is a Lottie file. I downloaded it from LottieFiles and uploaded it to my WordPress Media library.
You’ll need to save the design to your LottieFiles dashboard. Once you’ve done this, you can download the Lottie JSON file type.
It’ll be saved on your device. Then, upload it to WordPress. (Make sure the JSON file upload option is turned on.)
2. Design Your Upsell Offer
With the confetti file ready, the next step is to design the offer. Start by adding a new Section with a one-column Row. Now, set the Row’s Background Color to something neutral so the animation stands out.
Next, adjust the Row’s Sizing. Set Width to 100% and Max Width to none.
Add a Heading module for your main message (e.g., “Congratulations!”) and customize it as needed.
Similarly, add another Heading module and write your supporting line: You’ve unlocked 70% OFF on our Brand Psychology Course. Keep it centered and easy to read so it complements the main message without overwhelming it.
If you want to showcase a product demo or preview, insert either a Video or an Image module below that.
Next, add a strong CTA. Style it with a standout background color, such as red, so it can’t be missed.
Adjust the padding of all elements to give your layout some breathing room.
3. Add Scroll Effects To The CTA
Enable Scroll Effects in your button so that, along with the confetti, it also shows animation when users scroll.
Go to Advanced > Scroll Effects > Scroll Transform Effects. Enable Scaling up & down, and set Viewport Bottom to 78% and Viewport Top to 108%.
4. Add Lottie Module
Now it’s time to bring the confetti animation into your layout. Inside the same Row, add a Lottie Module below the Button and insert your JSON file.
As you can see, the Lottie currently sits below the button. However, we want to place it in the background of our layout. To do so, we’ll change the Position from Default to Absolute.
Go to Advanced > Position > Absolute. Set the Z Index to 1. If you want to position the confetti in the background, change the Z Index values of all elements (button, video, and headings) to 10.
Now, turn on the Scroll to Animate option in Lottie Animation > Trigger Animation.
Save your draft and Preview.
More Examples Of Scroll-Based Lottie Animations
We’ve built a full discount reveal section above, but scroll-based Lottie animations can be adapted in many other ways. Here are a few quick examples:
1. Blurb Icons Movement
Add subtle motion to blurb icons so they animate as the section scrolls into view. This makes service lists or feature highlights feel lively without overwhelming the design. It’s a great way to add motion to your landing pages and product highlights.
I’ve created these Lottie animations using SVG to Lottie (a tool by LottieFiles). You only need to upload icons as SVG files, select a preset, and download as a Lottie file.
2. Seasonal Sale Reveal
Scroll-based Lottie animations are perfect for seasonal promotions like Black Friday sale.
As the visitor scrolls into the sale section, you can also trigger effects such as confetti, exploding price tags, or countdown timers. It’s a simple way to build excitement and emphasize urgency without overwhelming the design.
3. Tiny Animations
Even small animations, such as arrows, badges, or checkmarks, can be tied to scrolling. These microinteractions help guide the eye, reinforce key points, and keep users engaged as they move through the page.
Bringing Motion To Divi 5 With Lottie
Scroll-based Lottie animations open up powerful ways to add interactivity to your Divi 5 designs. Whether it’s a full discount reveal, a seasonal promotion, or tiny icon movements, the Scroll to Animate option makes motion feel natural and connected to the browsing experience.
Try experimenting with different Lottie files, and you’ll be surprised at how much personality even a small animation can bring to a page. Ready to design your first Lottie?
Leave A Reply