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.
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.
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.
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/
Either download a JSON file (example link) and import It’s code/url here.
Load in Backend
Slide right to load in backend too.
Slide right to allow Elementor Popup.
Enter the JSON Code here.
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/
Specify on which action to play animation.
Slide right to enable Loop Animation.
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.)
Enable URL here.
Specify the type of URL you want to use, either Normal or Dynamic.
Enter the URL here.
Specify how long after the click you want the link to open.
Slide to enable Animation Heading.
Enter the Animation Heading here.
Slide to enable the Animation Description.
Enter the Animation Description here.
Select the type of Animation you want to render. You will get three options:
Set the Alignment here.
Set the Maximum Width here.
Set the Minimum Height here.
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.
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