< All Topics

Add On Scroll animations to your website to increase more Engagement using the Lottiefiles On Scroll widget. You will have several scroll animations you can use choose from to enhance the UX of your website. These animations work based on how the users scroll the page, this not only adds functionality to the website but also makes it look good.

Pro tip
Why not add On Scroll animation to your content using this widget. Add On Scroll animations just by using the JSON code made from Lottiefiles. Add On Scroll animations properly so that it does not cause clutter.

How to use the Lottiefiles On Scroll widget of The Plus Addons For Elementor

The Lottiefiles On Scroll widget comes with multiple functions. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Lottiefiles Animation Widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Lottie Content

To add On Scroll animation first you need to enter the JSON code as shown in the arrow below. To get a better understanding you can check out the Lottiefiles On Scroll tutorial video here: https://theplusaddons.com/elementor/widgets/lottiefiles-on-scroll-animation-elementor/

Enter JSON code for the Lottiefiles On Scroll widget.

JSON Input

Either download a JSON file (example link) and import It’s code/url here.

Load in Backend 

Slide right to load in backend too.

Elementor Popup

Slide right to allow Elementor Popup.

JSON Code

Enter the JSON Code here.

Main Settings

Then you need set the Play on setting to Scroll Parallax. To get a better understanding you can check out the Lottiefiles On Scroll tutorial video here: https://theplusaddons.com/elementor/widgets/lottiefiles-on-scroll-animation-elementor/

Play on

Specify on which action to play animation.

Loop Animation

Slide right to enable Loop Animation.

Loops

Enter the number of loops you want to add to the animation.

Animation Play Speed

Set the Animation Play speed here.

Custom Animation Start Time 

Enable and set a custom start time for the animation. (You need to enter Custom Start Time and End Time from Lottiefiles Web Player. You need to use same format e.g. 30,239, 699 etc.)

Custom Animation End Time 

Enable and set a custom end time for the animation.(You need to enter Custom Start Time and End Time from Lottiefiles Web Player. You need to use same format e.g. 30,239, 699 etc.)

URL

Enable URL here.

Type

Specify the type of URL you want to use, either Normal or Dynamic.

URL

Enter the URL here.

Click Delay

Specify how long after the click you want the link to open.

Animation Heading 

Slide to enable Animation Heading.

Heading 

Enter the Animation Heading here.

Animation Description 

Slide to enable the Animation Description.

Description 

Enter the Animation Description here.

Animation Renderer 

Select the type of Animation you want to render. You will get three options:
SVG
Canvas
HTML

Layout Options

Alignment

Set the Alignment here.

Maximum Width

Set the Maximum Width here.

Minimum Height

Set the Minimum Height here.

2. Style

The Style tab is used for customizing the appearance of all the Animated Service Boxes widget components. Let’s understand each of these customization options. 

Lottie Style

Set and specify the CSS Filters, Opacity, and Transition Duration here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?