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.
In this article, we will discuss how to use the Free Lottie Animations Widget for Elementor Page Builder. So, let’s get started!
- 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.
- External URL
- Animation JSON URL
- Media File
- Upload JSON File
- External URL
- Animation Speed
- Render As
1. Animation JSON URL
Get your JSON URL by applying the following steps.
- Go and open LottieFiles.com.
- Select the Lottie animated file that you want to use.
- Once you select it, open the file then copy the link located at Lottie Animation URL.
- Go back to the Elementor editor and paste the copied URL into the Animation JSON URL field.
Loop option is activated by default. Switching “Off” this option will make the Lottie Animation file work only for just one time.
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!
You could select from different type of trigger options.
This option will make the Lottie Animation file work only when it enters the viewport.
This option will make the Lottie Animation file work only when the mouse cursor hovers over it.
Selecting this option will make the Lottie Animation file works only while scrolling the page up/down.
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 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.
Increase or decrease the Lottie Animation size as per your needs. You can use this option to control the size on responsive devices.
The rotate option will give you the ability to change the angle of your selected Lottie Animation file. See the video tutorial from here.
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.
Enable/disable adding an existing page link or an external link to your Lottie Animation file.
11. Render As
Render the Lottie as SVG or Canvas, set render type to canvas if you’re having performance issues on the page.
From the Style tab you can control and manage the following options:
- Background Color
- CSS Filters
- Hover Background Color
- Hover Opacity
- Hover CSS Filters
- Border Type
- Border Radius
- Advanced Border Radius: Apply custom radius values for Elementor Lottie Animation widget. Get the radius value from here.
- Border Radius: Insert border radius values.