< All Topics

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.

Pro tip
Why not add animation to important parts of your content using this widget. Add animations just by using the JSON code made from Lottiefiles. Make sure not to over add animations on your website this affect the website performance.

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. 

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

Enter JSON code for the Lottiefiles Animation 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

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 the 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?