Module 39 of 71

Divi Lottie that moves exactly when you want.

Drop in a .json or .lottie file and control it: loop, speed, direction, delay, and play on hover, click or scroll.

Get Divi Supreme Pro Open the playground

Loader

Pulse

Shape morph

Animations not showing? Each Lottie module has its animation built in. If your site blocks it, upload lottie-loader.json, lottie-pulse.json and lottie-shape-morph.json to the Media Library and paste each file's URL into its Lottie module.

What is the Divi Lottie module?

Lottie is a Divi 5 module in Divi Supreme Pro that plays Lottie and dotLottie animations, the light vector animations exported from After Effects or made on LottieFiles. They stay sharp at any size and weigh far less than video.

Set the loop and how many times it repeats, a start delay, the speed and direction. Choose a trigger: autoplay when it enters the viewport, play on hover with a mouse-out action, play on click, or scrub with scroll relative to the page or its section.

file types

trigger modes

2.5×

max speed

custom code

Start from a Lottie recipe.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Try every Lottie setting.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Everything Lottie can do.

Lottie and dotLottie

Upload .json or the smaller .lottie format.

Loop control

Loop forever, or a set number of times.

Delay, speed, direction

Start delay in ms, speed from 0.1 to 2.5×, normal or reverse.

Hover and click

Play on hover with stop, pause or reverse on mouse out, or play on click.

Scroll scrubbing

Tie the frames to scroll, relative to the page or the section.

Viewport start

Autoplay when a set share of the module is on screen.

Lottie documentation

Setup for Divi 5: upload a file, then set loop, delay, speed, direction and trigger.

Read the guide

Need help? Contact support

Questions about Lottie.

What is a Lottie animation?

A small vector animation file, usually exported from After Effects with Bodymovin or made on LottieFiles. It stays sharp at any size and is much lighter than a video or GIF.

Which files can I use?

Lottie .json files and dotLottie .lottie files. Upload them to the media library or paste a URL.

Can it loop a set number of times?

Yes. Turn on Loop and set Number of times from 1 to 10. Leave it at 0 to loop forever.

Can it play on hover?

Yes. Turn on Trigger and choose Play Animation On Hover/Mouse Over, then choose what happens on mouse out: no action, stop, pause or reverse.

How does scroll work?

With Play Animation On Scroll, the animation moves forward as you scroll down and back as you scroll up, measured against the whole page or just the section.

When does autoplay start?

Animate in Viewport sets how much of the module must be visible before it plays.

Does Lottie work with Divi 5?

Yes. It is a native Divi 5 module and respects reduced motion settings.

Next module, A to Z

Marquee Module

Related modules

SVG Animation Module

Draw SVG strokes as you scroll.

Shapes Module

Decorative animated shapes.

Floating Multi Images Module

Layered floating images.

Rated 4.9 by Divi designers on Trustpilot. Running on 350,000+ sites.

Read reviews →

Add motion without the weight.

Lottie comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.

Get Divi Supreme Pro See all modules