Add animations to your website to increase more Engagement using the Lottiefiles Animation widget. You will not only get multiple designs to choose from but also several animations you can use for your designs. The UX of your website will be unmatched, once you are able to use the Lottiefiles Animation widget to its full potential.
How to use the Lottiefiles Animation widget of The Plus Addons For Elementor
The Lottiefiles Animation 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.
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.
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 the 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