With Divi 5’s Lottie Module, you’ll tie motion to the scroll, letting visitors control how the animation plays as they switch down the internet web page. This makes sections in reality really feel interactive and works well for timelines, hero banners, or product sales campaigns where you wish to have to focus on a message with movement.
In this tutorial, we’ll walk via learn how to prepare a scroll-based Lottie animation in Divi 5 and share a few examples you’ll adapt in your private designs.
What Is The Lottie Module In Divi 5?
Lottie is an open-source animation construction complex by way of Airbnb that renders vector animations in precise time the use of JSON. Relatively than exporting animations as heavy motion pictures or pixelated GIFs, you’ll use JSON data that stay crisp at any measurement, load in brief, and scale simply right through devices.
The Lottie Module in Divi 5 permits you to mix the ones 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 accommodates possible choices for autoplay, looping, hover triggers, and scroll-based playback, among others. You’ll even combine with Divi’s Interactions to copy mouse movement, add presets, and additional.
Because of Lotties are resolution-independent, they scale totally on each and every mobile and desktop devices. They’re moreover flexible, on account of this you’ll drop them proper right into a hero header, pair them with blurbs, or even use them as background portions behind text.
Divi 5’s Lottie Module makes it easy as a way to upload further engagement and interactions in your designs, helping visitors notice key details and stay hooked as much as the story you’re telling.
Be told The whole lot About Divi 5’s Lottie Module
How It Works
To use the Lottie module in Divi 5, you want to make sure of two problems:
- You might want to have the Lottie JSON file of the animation you wish to have to use.
- You’ll upload JSON data in your WordPress web page without issues.
For those who’ll design your own Lottie data, that will probably be great. However while you’ll’t, don’t fear about it. There are many free platforms, like LottieFiles, where you’ll to find animations on your internet web page.
Simply search for your animation and Download It.
You’ll get a JSON file that you simply’ll upload in your WordPress web page. Then again so that you could do it successfully, you’ll wish to modify some settings.
By means of default, WordPress doesn’t allow JSON uploads for protection reasons. When you try to upload directly, you’ll see a file kind error.
The easiest workaround is to permit JSON uploads the use of the Record Add Varieties by means of WPForms plugin, which allows additional MIME types, along side JSON. As quickly because the plugin is activated, search for ‘JSON’ inside the Add Document Upload Sorts record and make allowance the selection.
Scroll down and Save Changes. Your JSON uploads will not show an error.
Each time you’ve successfully uploaded your Lottie file, it’s time to use it for internet web page designs. Throughout the Divi Builder, add the Lottie module.
Then, click on on on Upload as a way to upload the Lottie animation you downloaded.
You’ll moreover add the Lottie URL from the original provide, then again the program can also be unhealthy. You don’t know when the author takes the Lottie down from the platform, so it’s upper to have it uploaded in your setup.
Perceive some Lottie controls underneath the Upload selection?
The ones let you decide how your Lottie should behave:
- Reason Animation: Keep watch over when the animation begins. Alternatives include On Load, On Hover, On Scroll, On Click on on, and Scroll to Animate.
- Loop Animation: Make a decision whether or not or no longer the animation repeats steadily or plays merely once.
- Animation Pace: Regulate the velocity at which frames construction. It’s serving to sync animation timing with the internet web page’s go with the flow or shopper actions.
- Direction: Come to a decision whether or not or no longer the animation plays forward from start to finish or reverse from end to beginning.
- Play Mode: Set how the animation behaves when introduced on.
And that’s it. Each time you configure the settings, the animation will render straight away right through the Divi builder, and also you’ll control its measurement and placement the use of Divi design possible choices.
Among these kinds of controls, the one that unlocks scroll-based motion is Scroll to Animate. This feature ties your animation frames directly to the buyer’s scroll position, allowing them to control how the motion unfolds as they scroll down the internet web page. Since this tutorial is able scroll-based animations, we’ll use this feature for all our builds.
Throughout the next segment, we’ll prepare different Lottie animations the use of Scroll to Animate. For that, you want the most recent Divi 5 style installed on your internet web page.
Rising Scroll-Based totally completely Discount Disclose Upsell Offer In Divi 5
There are many use circumstances of scroll-based Lottie animations, then again one of the vital the most important useful ones could be the hype build-up with an upsell offer. For this walkthrough, we’ll assemble a bargain disclose segment like the one underneath.
It uses confetti and bold text to disencumber a distinct offer for the reason that buyer scrolls into view. This animation works totally for upsells, guarantees, or limited-time promotions.
1. Upload The Lottie JSON Document
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 wish to save the design in your LottieFiles dashboard. Each time you’ve performed this, you’ll download the Lottie JSON file kind.
It’ll be saved on your software. Then, upload it to WordPress. (Make certain the JSON record add choice is grew to become on.)
2. Design Your Upsell Offer
With the confetti file able, the next step is to design the offer. Get began by way of together with a brand spanking new Section with a one-column Row. Now, set the Row’s Background Color to at least one factor independent so the animation sticks out.
Next, control the Row’s Sizing. Set Width to 100% and Max Width to none.
Add a Heading module on your number one message (e.g., “Congratulations!”) and customize it as sought after.
Similarly, add each different Heading module and write your supporting line: You’ve unlocked 70% OFF on our Brand Psychology Path. Keep it centered and easy to be told so it complements the main message without overwhelming it.
If you want to show off a product demo or preview, insert each a Video or an Image module underneath that.
Next, add a formidable CTA. Style it with a standout background color, akin to purple, so it could more than likely’t be not noted.
Regulate the padding of all portions to offer your construction some breathing room.
3. Add Scroll Effects To The CTA
Permit Scroll Effects on your button so that, together with the confetti, it moreover presentations animation when consumers scroll.
Move to Sophisticated > Scroll Effects > Scroll Transform Effects. Permit Scaling up & down, and set Viewport Bottom to 78% and Viewport Absolute best to 108%.
4. Add Lottie Module
Now it’s time to put across the confetti animation into your construction. Inside the an identical Row, add a Lottie Module underneath the Button and insert your JSON file.
As you’ll see, the Lottie in recent years sits underneath the button. Then again, we wish to place it inside the background of our construction. To do so, we’ll business the Position from Default to Absolute.
Move to Sophisticated > Position > Absolute. Set the Z Index to at least one. If you want to position the confetti inside the background, business the Z Index values of all portions (button, video, and headings) to 10.
Now, turn on the Scroll to Animate selection in Lottie Animation > Reason Animation.
Save your draft and Preview.
Additional Examples Of Scroll-Based totally completely Lottie Animations
We’ve built an entire bargain disclose segment above, then again scroll-based Lottie animations can also be adapted in loads of other ways. Listed here are a few speedy examples:
1. Blurb Icons Movement
Add subtle motion to blurb icons so that they animate for the reason that segment scrolls into view. This makes supplier lists or function highlights in reality really feel lively without overwhelming the design. It’s an effective way as a way to upload motion in your landing pages and product highlights.
I’ve created the ones Lottie animations the use of SVG to Lottie (a tool by way of LottieFiles). You absolute best wish to upload icons as SVG data, make a choice a preset, and procure as a Lottie file.
2. Seasonal Sale Disclose
Scroll-based Lottie animations are perfect for seasonal promotions like Black Friday sale.
Since the buyer scrolls into the sale segment, you’ll moreover purpose effects akin to confetti, exploding price tags, or countdown timers. It’s a simple solution to assemble excitement and emphasize urgency without overwhelming the design.
3. Tiny Animations
Even small animations, akin to arrows, badges, or checkmarks, can also be tied to scrolling. The ones microinteractions lend a hand data the eye, enhance key problems, and keep consumers engaged as they switch right through the internet web page.
Bringing Motion To Divi 5 With Lottie
Scroll-based Lottie animations open up tough tactics as a way to upload interactivity in your Divi 5 designs. Whether or not or no longer it’s an entire bargain disclose, a seasonal promotion, or tiny icon movements, the Scroll to Animate selection makes motion in reality really feel natural and hooked as much as the browsing enjoy.
Take a look at experimenting with different Lottie data, and in addition you’ll be shocked at how so much character even a small animation can put across to a internet web page. In a position to design your first Lottie?
The post How To Create Scroll-Based totally Lottie Animations In Divi 5 appeared first on Sublime Issues Weblog.
0 Comments