Add Lottie animation in Elementor

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

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.

Lottie icone
Lottie animation icon

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.

Lottie site
Lottie Files site

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.

Lottie animation settings
  • 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.
Lottie animation
Lottie animation fields

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
Lottie animation styles

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.

Lottie background column
Lottie animation background column

Configure Lottie background animation

Select the column properties, then ‘Advanced’ tab, unfold the ‘EAC Lottie background’ section and activate the Lottie animation.
Lottie background column activate
Lottie animation background

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.
Lottie background fields
Lottie animation background fields

Credit

This components use the library de Lottiefiles.

Leave a Comment