Elementor Pro has recently added the Lottie widget to it’s already vast collection of page building tools. Incorporating these animations gives your site a distinct style and, more importantly, keeps users engaged with your content. In this guide, you will learn how to choose and place Elementor Lottie animations on any page.
What are Lottie animations?
Lottie animations are prebuilt animation files that you can implement on your website. What makes it different than using a simple video animation is that Lottie files are based on JSON (JavaScript Object Notation). This gives Lottie two distinctive advantages. First, they are small files that can load quickly and will not drag down your site’s performance. And second, you can scale the animations to any size and they will not become pixelated. But how do Lottie and Elementor come together?
What You Will Need:
1. Select Your Lottie Animation
Our first step will be to select our desired animation to implement on our website. Head over to lottiefiles.com. Once there, sign up for an account. It is completely free and totally worth it! You can use your Google, Facebook, Twitter or Dribble account to sign up. If you have none of these accounts already, you can sign up with your name and email address.
After completing that process, use the search bar at the top of the page to explore their vast library of clips. For this example I will search for “truck”. You can use the filters at the top of the results to aid in your search. I would also like to mention that, by default, paid animations will be in these search results. If you are only interested in free animations, simply select the Type filter and choose Free.
Once I have selected the animation I want, click the Download JSON button and select Lottie JSON.
2. Add Lottie To Elementor Page
Navigate to the desired page you would like to feature the animation and open it up in Elementor. WIth the Elementor editor open, scroll down the Elementor panel on the left and find the Lottie widget. It is located at the bottom of the Pro collection of widgets.
Click and drag the Lottie widget the desired location just like any other Elementor element. The editor for the widget will open up on the left. Next have Media Source set to Media File. Then click the upload logo in the Upload JSON File and select the JSON file that we downloaded from Lottie. And that’s it! You have now added a Lottie animation in Elementor!
Make sure to open the Settings section of the Lottie widget to see all the adjustments you can make
You can determine the animation trigger based on the viewport, on click, on scroll or nothing at all. You can adjust play speed as well as the starting and end point of the animation. Play around with it and see all that Lottie animations can do for you!
