How To Create Scroll-Based totally Lottie Animations In Divi 5

With Divi 5’s Lottie Module, you’ll tie movement to the scroll, letting guests keep watch over 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 need to spotlight a message with motion.

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

What Is The Lottie Module In Divi 5?

Lottie is an open-source animation structure advanced by means of Airbnb that renders vector animations in actual time the usage of JSON. Quite than exporting animations as heavy movies or pixelated GIFs, you’ll use JSON information that keep crisp at any dimension, load briefly, and scale easily throughout units.

The Lottie Module in Divi 5 lets you 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 record, or paste the Lottie record URL. Then keep watch over how and when the animation performs. This comprises choices for autoplay, looping, hover triggers, and scroll-based playback, amongst others. You’ll even mix with Divi’s Interactions to replicate mouse motion, upload presets, and extra.

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

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

Be told The whole lot About Divi 5’s Lottie Module

How It Works

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

You could have the Lottie JSON record of the animation you need to make use of.
You’ll add JSON information on your WordPress website online with out problems.

If you’ll design your personal Lottie information, that will be nice. But when you’ll’t, don’t concern about it. There are lots of loose platforms, like LottieFiles, the place you’ll in finding animations to your web page.

Merely seek for your animation and Obtain It.

You’ll get a JSON record that you’ll add on your WordPress website online. However so that you can do it effectively, you’ll want to alter some settings.

Via default, WordPress doesn’t permit JSON uploads for safety causes. In the event you attempt to add without delay, you’ll see a record sort error.

The perfect workaround is to allow JSON uploads the usage of the Record Add Varieties by means of WPForms plugin, which permits further MIME sorts, together with JSON. As soon as the plugin is activated, seek for ‘JSON’ within the Upload Record Add Varieties listing and allow the choice.

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

Whenever you’ve effectively uploaded your Lottie record, 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 may also be dangerous. You don’t know when the writer takes the Lottie down from the platform, so it’s higher to have it uploaded on your setup.

Understand some Lottie controls below the Add choice?

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

Cause Animation: Keep an eye on when the animation starts. Choices come with On Load, On Hover, On Scroll, On Click on, and Scroll to Animate.
Loop Animation: Come to a decision whether or not the animation repeats incessantly or performs simply as soon as.
Animation Velocity: Alter the rate at which frames development. It is helping sync animation timing with the web page’s glide or consumer movements.
Course: 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 on.

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

Amongst most of these controls, the person who unlocks scroll-based movement is Scroll to Animate. This selection ties your animation frames without delay to the customer’s scroll place, permitting them to keep watch over 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 to your web page.

Obtain Divi 5 Be told Extra About Divi 5

Growing Scroll-Based totally Bargain Expose Upsell Be offering In Divi 5

There are lots of use instances of scroll-based Lottie animations, however one of the crucial helpful ones may well be the hype build-up with an upsell be offering. For this walkthrough, we’ll construct a cut price divulge phase like the only beneath.

It makes use of confetti and impressive textual content to free up 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 Record

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

You’ll want to save the design on your LottieFiles dashboard. Whenever you’ve carried out this, you’ll obtain the Lottie JSON record sort.

It’ll be stored to your tool. Then, add it to WordPress. (Be sure the JSON record add choice is grew to become on.)

2. Design Your Upsell Be offering

With the confetti record in a position, your next step is to design the be offering. Get started by means of including a brand new Segment with a one-column Row. Now, set the Row’s Background Colour to one thing impartial so the animation stands proud.

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

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

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

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

Subsequent, upload a powerful CTA. Taste it with a standout background colour, corresponding to crimson, so it might probably’t be neglected.

Alter the padding of all parts to present your structure some respiring room.

3. Upload Scroll Results To The CTA

Allow Scroll Results to your button in order that, along side the confetti, it additionally displays animation when customers scroll.

Cross to Complicated > Scroll Results > Scroll Turn into 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 structure. Inside of the similar Row, upload a Lottie Module beneath the Button and insert your JSON record.

As you’ll see, the Lottie lately sits beneath the button. On the other hand, we need to position it within the background of our structure. To take action, we’ll trade the Place from Default to Absolute.

Cross to Complicated > Place > Absolute. Set the Z Index to 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-Based totally Lottie Animations

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

1. Blurb Icons Motion

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

I’ve created those Lottie animations the usage of SVG to Lottie (a device by means of LottieFiles). You best want to add icons as SVG information, make a selection a preset, and obtain as a Lottie record.

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 corresponding to confetti, exploding value tags, or countdown timers. It’s a easy strategy to construct pleasure and emphasize urgency with out overwhelming the design.

3. Tiny Animations

Even small animations, corresponding to arrows, badges, or checkmarks, may also be tied to scrolling. Those microinteractions assist information the attention, improve 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 on your Divi 5 designs. Whether or not it’s a complete cut price divulge, a seasonal promotion, or tiny icon actions, the Scroll to Animate choice makes movement really feel herbal and hooked up to the surfing revel in.

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