Lottie is a file format, created especially for the animation files. It is JSON-based and was meant to ease out the process of applying animations to different platforms. Lottie file is smaller than the files of other formats, so it doesn’t harm the page loading speed. Besides that, it is easily scalable without losing the picture quality. Lottie widget within JetElements plugin allows you to insert Lottie files to your page in the Elementor page builder quickly and easily. Let’s take a closer look at its settings.
How to enable Lottie widget
Check if you have the latest version of the JetElements plugin. If not, update it. Go to JetPlugins > JetElements Settings and open the Available Widgets menu tab. Search through the widgets list, find Lottie, and turn the toggle on.
Lottie widget settings overview
Open the page or post where you would like to add the animation file in the Elementor page builder. Search for the Lottie widget and drag it to the page.
The default animation is the one with the Crocoblock logo but you can change it to any other you like. Let’s go through the settings.
Content settings block
You can either upload a JSON File stored on your computer or add an External URL. In the first case, you will be offered to select the file by clicking on the JSON File bar and picking it from the media library. The high-quality animation files could be found on the web (for example, on LottieFiles). If you choose the “External URL” option, you can type the link into the External URL bar. It is possible to use dynamic tags here.
Clicking on the animation file can lead the user to some other page. In this field, you can define what page will open after clicking on the Lottie item. If you click on the “Link Options” button, you will see additional settings. It is possible to make the link open in a new window (which is very convenient for users) and add a “nofollow” tag to it. Besides that, you can add some Custom Attributes.
There are five different ways of playing the animation, and each of them has some additional settings.
If you choose this option, the animation will be played automatically without any custom actions. In the Autoplay Delay bar, you can set the gap. The animation will start playing with a delay equal to the number of milliseconds you type in there.
If you want the animation to be played when the user hovers the pointer over it, choose this option. In On Hover Out drop-down menu, you can set the behavior of animation once it is moused over:
- No Action. In this case, the animation will just finish playing and stops;
- Pause. When the user moves the pointer out of the animation area, it will stop at the moment he/she leaves it. And when he/she moves the pointer back to it, it will start playing from the paused moment;
- Stop. The animation will completely stop playing and turns back to its starting point;
- Reverse. The animation will be played backward when the user moves the pointer out of it.
In this case, the animation will be played only after the user clicks on it. If you also added a link to it, you can set the Redirect Timeout, which is a delay between the user clicking and opening the link. It will be useful if you want the user to watch the animation till the end and redirect him/her to another page only after that. For example, in case you have a nice animated button.
When you choose this option, the animation will be played while the user is scrolling the page. The playing speed will be similar to the speed of page scrolling. Moving the Viewport slider, you can choose at what moment the animation will start playing. This slider defines what part of the screen the animation has to fill before it starts or stops moving.
If you choose this one, the animation will be played only while it is visible on the screen. When the user moves lower or higher through the page, it stops. With the help of the Viewport slider, you can define what part of the animation still has to be visible before it stops playing.
This toggle enables the animation looping, which can create an impression of infinite movement.
If you turn this toggle on, the animation you uploaded will be played backward.
If you need to make your animation move faster or slower, you can do that in this bar. On “1” the animation will move at its original speed.
That’s all! You now know how to add a Lottie animation file to your website and customize it according to your needs.