Intro
The latest addition to Premium Addons PRO for Elementor is Elementor Lottie Animations section/container addon. With this new feature, you can revolutionize your website design by effortlessly incorporating captivating animated Lottie Files. The best part is that you won’t have to be concerned about your website’s performance, as Lottie files are considerably lighter compared to GIFs and other animation formats. Plus, you don’t need any coding skills to make the most of this exciting addition.
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.
Animation JSON URL
Please follow the steps below 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.
- Loop, Reverse, and Speed Controls: You can control the behavior of your Lottie Animation file on your webpage by toggling the Loop and Reverse options. Additionally, you’ll have the flexibility to adjust the speed of the Lottie animation.
- Hover Action: Decide whether you want the Lottie animations to play or pause when the mouse hovers over it. You can see a real example from here.
- Start Animations on Viewport: This option will make the Lottie Animation file work once the user reaches the Viewport area. You can enable or disable it as you want.
- 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!
- 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.
- Background Type: Select background color or image behind your Lottie animation file.
- Border Type, Border Radius, and Box Shadow: Add a border around your Lottie animation and adjust the border-radius and box-shadow for the container behind it.
- Scroll Parallax: Create a smooth vertical scrolling effect for the Lottie animation as you scroll down the page. You can explore Premium Parallax Elementor Section Addon for more details.
- Padding, Z-Index, and Responsive Controls: Customize the space around your Lottie animation with the Padding controls. Additionally, you have the ability to individually adjust the z-index for each Lottie animation file. Lastly, decide on which devices you want to show or hide each Lottie animation 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 add Lottie animations wherever you want on your website.
Conclusion
Elementor Lottie Animations addon in Premium Addons PRO for Elementor allows you to effortlessly incorporate captivating animated Lottie Files into your website, improving design without sacrificing performance. Plus, it’s user-friendly, requiring no coding skills. This exciting addition enhances your website’s visual appeal and interactivity.
