Lottie for Elementor is a new widget that allows you to embed Lottie animations into your site and improve user experience (UX) of your visitors.
This widget has been developed and tailored with lots of customization options by eliminating the need for setup and coding.
With this tutorial you will be able to control the animation of icons or animated images that you will have previously loaded or linked from the Lottie files site
Table of Contents
Using the Lottie animation component
The plugin Elementor is installed and active.
The plugin EAC components is installed and active.
From the settings panel (EAC Advanced) you have to drag & drop the Lottie animation icon on the panel preview.
Retrieve the animation from Lottiefiles site
You must create an account before accessing the source/url of the animations.
After that go to ‘Discover/Free animations’ and make your choice then you can download or copy the URL of the animation.
The widget automatically enables the import of files in JSON format.
To do this, make sure of the origin of the JSON file if you upload it to the media library to avoid any security risk.
Configure Lottie animation
You must choose the animation between its url or a JSON file previously loaded into the library.
After that apply a size, possibly the rotation of the animation and its position.
You can add an internal/external link on this animation.
If the source is a URL, you need to check the origin of the JSON url to avoid any security risk.
The ‘Enable Unfiltered File Uploads’ option on the ‘Elementor/Settings/Advanced’ settings page must be enabled.
For roles assigned to your users, the ‘Enable the option to upload JSON files’ option on the ‘Elementor/Role manager’ page must be enabled.
Switching Off the Loop option will make the Lottie animation file work only for just one time,
– the Reverse option will reverse the direction of the animation,
– Increase animation speed by increasing the Speed option,
– if you’re having performance issues on the page switch the Render type option to Canvas.
Select different trigger types
– None the animation is launched when the page loads,
– Hover work only when the mouse cursor hovers over it,
– Viewport the animation is launched only in the visible part of the window.
Apply styles to Lottie animation
From the Style tab you can control and manage the following options: Background color, Opacity, Border, Border radius, Shadow the animation widget, Padding.
Use Lottie animations in the background of an element
Pay attention: Lottie background is disabled if Elementor Pro is installed and active.
If you want to add the Lottie animations in the background of a column, you must first enable this feature.
To do this, go to the configuration page of the plugin EAC components tab Features, activate it then save changes.
Configure Lottie background animation
Some related options are enabled automatically.
– You must choose the type of source (Media file or URL),
– the animation will be active in the visible part of the window,
– and you can apply opacity to the animation.
I activated the Lottie BG feature but still not getting the option within elementor
Hello,
The only reason why ‘Lottie background’ doesn’t appear is if you have Elementor PRO installed.
==> https://elementor-addon-components.com/add-lottie-animation-in-elementor/#use-lottie-animations-in-the-background-of-an-element
Rgds