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

    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.

    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 risk.

    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.

    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.

    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.

    Enable Lottie background
    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

    2 thoughts on “Add Lottie animation in Elementor”

    Leave a Comment