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.
Activate the component Lottie animation
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 problems.
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.
- 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.
Credit
This components use the library de Lottiefiles.