How to create totally scroll-based Lottie animations in Divi 5

With Divi 5’s Lottie module, you’ll tie motion to scrolling, allowing visitors to control how the animation plays as they navigate to the Internet web page. This makes the sections really interactive and works well for timelines, hero banners, or product sales campaigns where you want to focus on a message with movement.

In this tutorial, we’ll learn how to prepare a scroll-based Lottie animation in Divi 5 and share some examples that you’ll adapt into your own private projects.

What is the Lottie module in Divi 5?

Lottie is an open source animation building complex via Airbnb that renders vector animations in precise time using JSON. Rather than exporting animations as chunky movies or pixelated GIFs, you’ll use JSON data that stays sharp at any measurement, loads quickly, and scales easily across devices.

The Lottie module in Divi 5 allows you to mix those animations directly into your layouts.

Subscribe to our Youtube channel

To get started, simply add the file Lots module and upload a JSON file or paste the URL of the Lottie. Then control how and when the animation plays. This allows possible choices for autoplay, looping, hover triggers, and scroll-based playback, among others. You can also combine them with Divi Interactions to copy mouse movement, add presets, and more.

Since Lotties is resolution independent, it adapts perfectly to all mobile and desktop devices. They’re also flexible, so you’ll place them directly in your hero header, pair them with blurbs, or even use them as background pieces behind text.

Divi 5’s Lottie module makes it easy to load additional engagement and interactions into your designs, helping visitors notice key details and stay as engaged as the story you’re telling.

Find out all about the Divi 5 Lottie module

How it works

To use the Lottie module in Divi 5, you need to make sure of two issues:

• You may want to have the Lottie JSON file of the animation you want to use.
• You will load the JSON data into your wordpress web page without any problems.

For those who will design their own Lottie data, it will probably be great. However, even if you don’t, fear not. There are many free platforms, such as LottieFiles, where you will find animations on your web page.

Simply search for your animation and Download it.

You will get a JSON file that you will simply upload to your wordpress webpage. Then again, in order to do this successfully, you’ll want to change some settings.

By default, wordpress does not allow JSON uploads for security reasons. When you try to upload directly, you will see a file type error.

wordpress-lottie-error-1.jpg” alt=”file type error” width=”1800″ height=”851″/>

The simplest solution is to allow JSON uploads to use record appending varieties via the WPForms plugin, which allows additional MIME types, along with JSON. As soon as the plugin is activated, search “JSON” inside the file Add document loading orders record and take the selection into account.

Scroll down and Save changes. Your JSON uploads will not show an error.

Whenever you have successfully uploaded your Lottie file, it’s time to use it for Internet web page design. In Divi Builder, add the file Lots module.

Thenclick on on on Loading as a way to load the Lottie animation you downloaded.

Additionally, you will add the Lottie URL from the original supply, but again the program can also be malicious. You don’t know when the author will remove Lottie from the platform, so it’s best to have it loaded into your setup.

Perceive some Lottie controls below the Loading selection?

Those let you decide how your Lottie should behave:

• Reason for animation: Keep an eye out for the animation to begin. Alternatives include On Load, On Hover, On Scroll, On Click, and Scroll to Animate.
• Looping animation: Decide whether or not the animation repeats constantly or plays only once.
• Animation pace: Adjust the speed at which frames are built. It is used to synchronize the timing of the animation with the flow of the Internet web page or with the actions of the buyer.
• Direction: Decide whether or not the animation moves forward from start to finish or backwards from end to start.
• Game Modes: Sets the behavior of the animation when it is introduced.

And that’s all. Whenever you configure the settings, the animation will be rendered immediately through the Divi builder, and you will also control its measurement and positioning using the possible Divi design choices.

Among these types of controls, the one that unlocks swipe-based movement is Scroll to Animate. This feature links animation frames directly to the shopper’s scroll position, allowing them to control how the motion unfolds as they scroll down the Internet web page. Since this tutorial supports scroll-based animations, we will be using this feature for all of our builds.

In the next segment we will prepare several animations of Lottie using Slide to Animate. For this, you want the latest Divi 5 style installed on your internet web page.

Increasing swipe-based discount reveals upsell offer in Divi 5

There are many circumstances of using swipe-based Lottie animations, but one of the most important and useful might be building hype with an upsell offer. For this walkthrough, we’ll assemble a business disclosure segment like the one below.

Use confetti and bold text to free up a distinct offer for the shopper to scroll to view. This animation works great for upsells, guarantees, or limited-time promotions.

1. Load the Lottie JSON document

The design above uses a confetti background, which is a Lottie. I downloaded it from LottieFiles and uploaded it to my wordpress media library.

We recommend saving your drawing in your LottieFiles dashboard. Each time you do this, you will download the file Lottie JSON file type.

It will be saved to your software. Then, upload it to wordpress. (Make sure The add JSON record choice has become active.)

2. Design your upsell offer

Once the confetti file is enabled, the next step is to design the offer. Start along with a brand new section with a one-column row. Now set the background color of the row to at least one independent factor so that the animation stands out.

Next, check the row sizing. Set Length 100% e Maximum width to anyone.

Add a header form to your number one message (for example, “Congratulations!”) and customize it as desired.

Similarly, add each different header module and write the supporting line: You’ve unlocked 70% off our brand psychology journey. Keep it centered and easy to tell so it complements the main message without overwhelming it.

If you want to show a demo or preview of your product, insert a Video or Image module underneath each.

Next, add a great CTA. Style it with a stunning background color, similar to purple, so it most likely won’t be noticed.

Adjust the padding of all parts to give your construction some breathing room.

3. Add scrolling effects to your CTA

Permit Scroll effects on your button so that, along with the confetti, it also features an animation when users swipe.

Move in Sophisticated > Scroll Effects > Scroll Transform Effects. Permit Climb up and down, and set Viewport Bottom to 78% and Viewport Absolute best to 108%.

4. Add the Lottie module

Now it’s time to insert confetti animation into your construction. Within an identical line, add a Lottie module below the button and insert your JSON file.

As you will see, in recent years the Lottie has been located under the button. On the other hand, we want to place it in the background of our construction. To do this, we will do business with Position from Default TO Absolute.

Move in Sophisticated > Position > Absolute. Set the Z index to at least one. If you want to place confetti in the background, set the Z-index values ​​of all parts (button, video, and headers) to 10.

Now turn on the Scroll to Animate selection inside Lottie Animation > Reason Animation.

Save your draft and Preview.

More examples of fully scroll-based Lottie animations

We created an entire business disclosure segment above, but Lottie’s scroll-based animations can also be adapted in many other ways. Here are some quick examples:

1. Blurb icon movement

Add subtle motion to the blurb icons so that they animate as the segment scrolls in the view. This makes vendor listings or highlighted features actually really vibrant without overwhelming the design. It’s an effective way to load movement into your landing pages and product highlights.

I created those Lottie animations using SVG for Lottie (a tool via LottieFiles). It is absolutely better to load the icons as SVG data, make a choice as a preset, and get it as a Lottie file.

2. Information on seasonal sales

Swipe-based Lottie animations are perfect for seasonal promotions like Black Friday sales.

As the buyer flows into the sales segment, you will also use effects similar to confetti, exploding price tags or countdown timers. It’s a simple solution to bring together excitement and emphasize urgency without overwhelming the design.

3. Small animations

Even small animations, similar to arrows, badges, or checkmarks, can be tied to scrolling. Those microinteractions give data a helping hand, improve key issues, and keep consumers engaged as they go straight through the Internet web page.

Bringing movement to Divi 5 with Lottie

Scroll-based Lottie animations open up tricky tactics as a way to load interactivity into your Divi 5 projects. Regardless of whether or not it’s a whole deal, a seasonal promotion, or small icon movements, the Scroll to Animate the selection actually makes the movement truly natural and engaging as much as the pleasure of navigation.

Check out Lottie’s experimentation with different data and you’ll also be shocked at how much personality even a small animation can convey to a web page. Can you design your first Lottie?

The post How to Create Fully Scroll-Based Lottie Animations in Divi 5 appeared first on the Sublime Issues Blog.

wordpress Web Design

[ continue ]

wordpress Maintenance Plans | wordpress hosting

Read more