How To Add Elementor Lottie Animations

Add Eye-Catching Animations To Your Elementor Site
Elementor & Lottie

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!

elementor lottie

 

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!

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents