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 a lot lighter than GIF and other animation formats. Also, no coding skills required.
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.
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
1. Animation JSON URL
Please follow the steps underneath to get your JSON URL.
- Go to LottieFiles.com.
- Select the animated file that you want to use.
- Open it, then copy the Lottie Animation URL.
- Go back to the backend of your webpage, then paste the copied URL into the Animation JSON URL field.
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.
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.
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.
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.
