Lottie Animations Widget Tutorial

Intro

We are happy to introduce Elementor Lottie Animations Free Widget that has recently joined the Premium Addons family. This new fancy widget has been developed and tailored with lots of customization options that will make you feel fascinated by adding more and more Lottie Animation files to your website.

Elementor Lottie Animations Widget Video Tutorial

In this article, we will discuss how to use the Free Lottie Animations Widget for Elementor Page Builder. So, let’s get started!

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Arrow Points at Lottie Animations Widget in Elementor's Control Panel
Lottie Animations Widget for Elementor Page Builder

Key Features

  • Source
    • External URL
      • Animation JSON URL
    • Media File
      • Upload JSON File
  • Loop
  • Reverse
  • Animation Speed
  • Trigger
    • None
    • Viewport
    • Hover
    • Scroll
      • Speed
      • Viewport
  • Size
  • Rotate
  • Alignment
  • Link
  • Render As
    • SVG
    • Canvas
The Available Options in Lottie Animations Widget for Elementor Page Builder
Elementor Lottie Animations Free Widget

1. Animation JSON URL

Get your JSON URL by applying the following steps.

  1. Go and open LottieFiles.com.
  2. Select the Lottie animated file that you want to use.
  3. Once you select it, open the file then copy the link located at Lottie Animation URL.
  4. Go back to the Elementor editor and paste the copied URL into the Animation JSON URL field.
Two Screenshots Displays The Lottie Animation URL
Lottie Animation URL

2. Loop

Loop option is activated by default. Switching “Off” this option will make the Lottie Animation file work only for just one time.

Showing The Loop Option in The Lottie Animations Widget fo Elementor
Loop Option in Lottie Animations Free Widget for Elementor

3. Reverse

The reverse option will make the Lottie Animation file moves backward.

4. Animation Speed

Feel free to adjust the Lottie Animation speed by making it slower or faster. It’s all depends on your needs!

5. Trigger

You could select from different type of trigger options.

Viewport:

This option will make the Lottie Animation file work only when it enters the viewport.

Hover:

This option will make the Lottie Animation file work only when the mouse cursor hovers over it.

Scroll:

Selecting this option will make the Lottie Animation file works only while scrolling the page up/down.

Speed

This option will allow you to decide how fast or slow the Lottie Animation file should work while scrolling the page up or down.

Viewport

Viewport means the user’s visible part of a webpage. You can use this control to define the starting and ending points for the Lottie Animation file.

Displaying Animate on Scroll Option Including Speed and Viewport Controls
Trigger on Scroll Controls: Speed and Viewport

7. Size

Increase or decrease the Lottie Animation size as per your needs. You can use this option to control the size on responsive devices.

8. Rotate

The rotate option will give you the ability to change the angle of your selected Lottie Animation file. See the video tutorial from here.

9. Alignment

Use the alignment control to align your Lottie Animation file to the right, center, or left.

NOTE* The alignment control won’t work as long as the Lottie Animation file takes the full column width. If you want to use this option, just make sure that your Lottie Animation file is not taking the full width of your column. You can decrease its size using the size option.

10. Link

Enable/disable adding an existing page link or an external link to your Lottie Animation file.

Showing Link Option in Elementor's Lottie Animations Free Widget
Add a Link to Premium Lottie Animations Elementor Widget

11. Render As

Render the Lottie as SVG or Canvas, set render type to canvas if you’re having performance issues on the page.

Style

From the Style tab you can control and manage the following options:

  • Background Color
  • Opacity
  • CSS Filters
  • Hover Background Color
  • Hover Opacity
  • Hover CSS Filters
  • Border Type
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius
  • Padding
Displaying The Style Controls in Lottie Animations Free Widget for Elementor Page Builder
Elementor Lottie Animations Widget Style Controls

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.