With Divi 5’s Lottie Module, you’ll tie movement to the scroll, letting guests keep an eye on how the animation performs as they transfer down the web page. This makes sections really feel interactive and works smartly for timelines, hero banners, or gross sales campaigns the place you wish to have to focus on a message with motion.

On this educational, we’ll stroll thru tips on how to arrange a scroll-based Lottie animation in Divi 5 and percentage a couple of examples you’ll adapt in your personal designs.

What Is The Lottie Module In Divi 5?

Lottie is an open-source animation layout evolved through Airbnb that renders vector animations in actual time the usage of JSON. Moderately than exporting animations as heavy movies or pixelated GIFs, you’ll use JSON recordsdata that keep crisp at any measurement, load briefly, and scale easily throughout gadgets.

The Lottie Module in Divi 5 allows you to combine those animations without delay into your layouts.

Subscribe To Our Youtube Channel

To get began, merely upload the Lottie module and add a JSON report, or paste the Lottie report URL. Then keep an eye on how and when the animation performs. This contains choices for autoplay, looping, hover triggers, and scroll-based playback, amongst others. You’ll even mix with Divi’s Interactions to reflect mouse motion, upload presets, and extra.

As a result of Lotties are resolution-independent, they scale completely on each cellular and desktop gadgets. They’re additionally versatile, this means that you’ll drop them right into a hero header, pair them with blurbs, and even use them as background parts in the back of textual content.

Divi 5’s Lottie Module makes it simple so as to add extra engagement and interactions in your designs, serving to guests understand key main points and keep attached to the tale you’re telling.

Learn Everything About Divi 5’s Lottie Module

How It Works

To make use of the Lottie module in Divi 5, you wish to have to ensure of 2 issues:

• You might have the Lottie JSON report of the animation you wish to have to make use of.
• You’ll add JSON recordsdata in your WordPress web page with out problems.

If you’ll design your individual Lottie recordsdata, that might be nice. But when you’ll’t, don’t concern about it. There are lots of loose platforms, like LottieFiles, the place you’ll to find animations on your web page.

Merely seek for your animation and Obtain It. 

You’ll get a JSON report that you’ll add in your WordPress web page. However with the intention to do it effectively, you’ll want to regulate some settings.

By means of default, WordPress doesn’t permit JSON uploads for safety causes. Should you attempt to add without delay, you’ll see a report kind error.

The perfect workaround is to permit JSON uploads the usage of the File Upload Types by WPForms plugin, which permits further MIME varieties, together with JSON. As soon as the plugin is activated, seek for ‘JSON’ within the Upload Document Add Sorts listing and permit the choice.

Scroll down and Save Adjustments. Your JSON uploads will now not display an error.

If you’ve effectively uploaded your Lottie report, it’s time to make use of it for web page designs. Within the Divi Builder, upload the Lottie module.

Then, click on on Add so as to add the Lottie animation you downloaded.

You’ll additionally upload the Lottie URL from the unique supply, however this system can also be dangerous. You don’t know when the author takes the Lottie down from the platform, so it’s higher to have it uploaded in your setup.

Realize some Lottie controls below the Add choice?

Those let making a decision how your Lottie will have to behave:

• Cause Animation: Keep watch over when the animation starts. Choices come with On Load, On Hover, On Scroll, On Click on, and Scroll to Animate.
• Loop Animation: Make a decision whether or not the animation repeats incessantly or performs simply as soon as.
• Animation Velocity: Regulate the rate at which frames development. It is helping sync animation timing with the web page’s waft or consumer movements.
• Route: Decide whether or not the animation performs ahead from begin to end or opposite from finish to starting.
• Play Mode: Set how the animation behaves when brought about.

And that’s it. If you configure the settings, the animation will render in an instant throughout the Divi builder, and you’ll regulate its measurement and site the usage of Divi design choices.

Amongst a majority of these controls, the one who unlocks scroll-based movement is Scroll to Animate. This selection ties your animation frames without delay to the customer’s scroll place, letting them keep an eye on how the movement unfolds as they scroll down the web page. Since this educational is ready scroll-based animations, we’ll use this selection for all our builds.

Within the subsequent phase, we’ll arrange other Lottie animations the usage of Scroll to Animate. For that, you wish to have the newest Divi 5 model put in for your web page.

Growing Scroll-Primarily based Bargain Expose Upsell Be offering In Divi 5

There are lots of use circumstances of scroll-based Lottie animations, however some of the helpful ones could be the hype build-up with an upsell be offering. For this walkthrough, we’ll construct a cut price expose phase like the only beneath.

It makes use of confetti and impressive textual content to liberate a different be offering because the customer scrolls into view. This animation works completely for upsells, promises, or limited-time promotions.

1. Add The Lottie JSON Document

The above design makes use of a confetti background, which is a Lottie report. I downloaded it from LottieFiles and uploaded it to my WordPress Media library.

You’ll want to save the design in your LottieFiles dashboard. If you’ve executed this, you’ll obtain the Lottie JSON report kind.

It’ll be stored for your instrument. Then, add it to WordPress. (Make certain the JSON file upload option is turned on.) 

2. Design Your Upsell Be offering

With the confetti report in a position, your next step is to design the be offering. Get started through including a brand new Phase with a one-column Row. Now, set the Row’s Background Colour to one thing impartial so the animation sticks out.

Subsequent, regulate the Row’s Sizing. Set Width to 100% and Max Width to none.

Upload a Heading module on your primary message (e.g., “Congratulations!”) and customise it as wanted.

In a similar way, upload any other Heading module and write your supporting line: You’ve unlocked 70% OFF on our Emblem Psychology Path. Stay it focused and simple to learn so it enhances the primary message with out overwhelming it.

If you wish to show off a product demo or preview, insert both a Video or an Symbol module beneath that.

Subsequent, upload a robust CTA. Taste it with a standout background colour, similar to crimson, so it may possibly’t be ignored.

Regulate the padding of all parts to present your format some respiring room.

3. Upload Scroll Results To The CTA

Allow Scroll Results for your button in order that, at the side of the confetti, it additionally presentations animation when customers scroll.

Pass to Complicated > Scroll Results > Scroll Turn out to be Results. Allow Scaling up & down, and set Viewport Backside to 78% and Viewport Best to 108%.

4. Upload Lottie Module

Now it’s time to convey the confetti animation into your format. Within the similar Row, upload a Lottie Module beneath the Button and insert your JSON report.

As you’ll see, the Lottie recently sits beneath the button. Alternatively, we need to position it within the background of our format. To take action, we’ll trade the Place from Default to Absolute.

Pass to Complicated > Place > Absolute. Set the Z Index to at least one. If you wish to place the confetti within the background, trade the Z Index values of all parts (button, video, and headings) to ten.

Now, flip at the Scroll to Animate choice in Lottie Animation > Cause Animation.

Save your draft and Preview.

Extra Examples Of Scroll-Primarily based Lottie Animations

We’ve constructed a complete cut price expose phase above, however scroll-based Lottie animations can also be tailored in lots of alternative ways. Listed below are a couple of fast examples:

1. Blurb Icons Motion

Upload refined movement to blurb icons so that they animate because the phase scrolls into view. This makes carrier lists or function highlights really feel full of life with out overwhelming the design. It’s a good way so as to add movement in your touchdown pages and product highlights.

I’ve created those Lottie animations the usage of SVG to Lottie (a device through LottieFiles). You simplest want to add icons as SVG recordsdata, choose a preset, and obtain as a Lottie report.

2. Seasonal Sale Expose

Scroll-based Lottie animations are ideal for seasonal promotions like Black Friday sale.

Because the customer scrolls into the sale phase, you’ll additionally cause results similar to confetti, exploding worth tags, or countdown timers. It’s a easy technique to construct pleasure and emphasize urgency with out overwhelming the design.

3. Tiny Animations

Even small animations, similar to arrows, badges, or checkmarks, can also be tied to scrolling. Those microinteractions lend a hand information the attention, support key issues, and stay customers engaged as they transfer during the web page.

Bringing Movement To Divi 5 With Lottie

Scroll-based Lottie animations open up robust techniques so as to add interactivity in your Divi 5 designs. Whether or not it’s a complete cut price expose, a seasonal promotion, or tiny icon actions, the Scroll to Animate choice makes movement really feel herbal and attached to the surfing revel in.

Check out experimenting with other Lottie recordsdata, and also you’ll be stunned at how a lot character even a small animation can convey to a web page. In a position to design your first Lottie?

The submit How To Create Scroll-Based Lottie Animations In Divi 5 seemed first on Elegant Themes Blog.