Lottie Animations Section Addon Tutorial

Intro

Elementor Lottie Animations is a new section addon that recently added to Premium Addons PRO for Elementor. This section addon will allow you to create websites like never before by adding eye-catchy animated Lottie Files with no need to worry about your website’s speed as Lottie files are allot lighter than GIF and other animation formats. Also, no coding skills required.

Elementor Lottie Animations Section Addon Video Tutorial

Requirements:

  • You will need Premium Addons PRO 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. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Three screenshots displays Lottie Animations Section Add-on in Elementor's control panel.
Premium Lottie Animations Section Addon for Elementor Page Builder

Key Features

  • Animation JSON URL
  • Loop, Reverse, and Speed Controls
  • Hover Action [None, Play, or Pause]
  • Start Animation on Viewport
  • Animate on Scroll
  • Horizontal and Vertical Positions
  • Size, Opacity, and Rotate Controls
  • Background Type [Color and/or Image]
  • Border Type, Border Radius, and Box Shadow Controls
  • Scroll Parallax
  • Padding, Z-Index, and Responsive Controls
Two screenshots showing Lottie Animations Section Add-on settings in Elementor Page Builder.
Lottie Animations Section Addon Settings

1. Animation JSON URL

Please follow the steps underneath to get your JSON URL.

  1. Go to LottieFiles.com.
  2. Select the animated file that you want to use.
  3. Open it, then copy the Lottie Animation URL.
  4. Go back to the backend of your webpage, then paste the copied URL into the Animation JSON URL field.
Screenshot showing a Lottie Animation file popup window on LottieFiles.com.
Lottie Animation File URL
This clarifies where to paste the Lottie Animation JSON URL within Premium Lottie Animations Section Add-on for Elementor.
Inserting Animation JSON URL Into Elementor Lottie Animations Section Addon

2. Loop, Reverse, and Speed Controls

Manage how you want your Lottie Animation file work on your webpage by deciding to switch on/off Loop and Reverse options, in addition, you will have the ability to manage the Lottie animation speed.


3. Hover Action [None, Play, or Pause]

Decide whether if you want the Lottie animations to play or pause when the mouse hovers over it. You can see a real example from here.

Displaying Hover Action option within Premium Lottie Animations Section Add-on.
Lottie Animation Hover Action is Set to [Pause]

4. Start Animations on Viewport

This option will make the Lottie Animation file work once the user reaches to the viewport area. You can enable or disable it as you want.


5. Animate on Scroll

Make your Lottie Animations file work while scrolling the page up or down. See this Lottie Animation Section Addon example from here.


6. Horizontal and Vertical Positions

Manage your Lottie Animation file placement in percentage within the page using the horizontal and vertical controls. Also, you can enjoy a freehand design experience by moving your Lottie Animations Section Addon elements freely using your mouse!


7. Size, Opacity, and Rotate Controls

Control your Lottie Animations width and height using the Size control, in addition, you can play with the Opacity and Rotate options to make the Lottie Files fit well on your website according to your needs.

This displaying Size, Opacity, and Rotate options included in Elementor Lottie Animations Section Add-on.
Size, Opacity, and Rotate Controls in Elementor Lottie Animations Section Addon

8. Background Type [Color and/or Image]

You have the ability to add a background color or image behind your Lottie animation file.


9. Border Type, Border Radius, and Box Shadow Controls

Decorate your Lottie animation file by adding a border around it. You can select from the following border types:

  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove

That’s beside, you can manage the border-radius and box-shadow that adds a shadow to the container behind the Lottie animation file.


10. Scroll Parallax

Enabling this option will make the Lottie animation file smoothly moves up/down while scrolling the page.

Did you check Premium Parallax Elementor Section Addon before?


11. Padding, Z-Index, and Responsive Controls

Add padding around the Lottie animation file using Padding controls. Besides, you can manage the z-index of each Lottie animation file separately. Lastly, control on which device you want to display/hide each Lottie animation file located in your Elementor section.

This screenshot is showing the responsive controls within Premium Lottie Animations Section Add-on for Elementor.
Lottie Animations Section Addon Responsive Controls

What if I want to use Lottie Animation as a foreground object?

Please check this Elementor Lottie Animation tutorial which will help you adding Lottie animations wherever you want on your website.

Download Now it's free!

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