How to Add Lottie Animation in Elementor

Since version 2.10.0, Elementor (Elementor Pro more precisely) supports Lottie animation, allowing you to add a lightweight animation to your page/template. Before the update, you could actually apply animation effects to a widget from the Motion Effects block under the Advanced tab. However, Lottie works in a different way. Lottie is an animation format, much like GIF so a Lottie file is a prerequisite to add Lottie animation in Elementor.

In Elementor, you can add a Lottie file using the Lottie widget. Hence, you can also apply motion effects to your Lottie file. For instance, you can apply a horizontal scroll effect to make your Lottie move horizontally — whether to the right direction or to the left direction — as the page is scrolled. Here is an example.

You can see the original file of the animation above here. On the original Lottie file, the cyclist — as well as his bike — stay in the same position when the page is scrolled. The make it move to the right when the page is scrolled down and back to the left when the page is scrolled up, you can use the Elementor’s built-in motion effect.

What is Lottie and where to get a Lottie file?

As mentioned earlier, Lottie is an animation format. It is a JSON-based animation format developed by engineers at Airbnb. You can learn more about the history of Lottie on this page.

The biggest advantage of adopting Lottie on your website is that your website will be much lighter since a Lottie file is much smaller than other animation formats, with sharp visual quality. You can also resize your Lottie file without breaking the pixels. Adobe After Effects is one of the tools that you can use to create a Lottie file. You can also get Lottie files for free on LottieFiles.

Please note that Lottie and LottieFiles are two different things. Lottie is — once again — an animation format, while LottieFiles is a website that offers Lottie files.

How to add Lottie animation in Elementor

Before getting started to add a Lottie animation in Elementor, make sure you have upgraded your Elementor Pro to version 2.10.0 or the higher version. Once you are ready, create a new page and edit with Elementor. Or edit an existing one. On the Elementor editor, drag the Lottie widget to the canvas area.

Go to the left panel. On the Lottie block under the Content tab, select the source. If you choose Media File, simply upload your Lottie file (the JSON file) by clicking the upload icon. You can then set the alignment and add a custom URL.

If you want to use a Lottie file hosted on a third-party source, select the External URL option and paste the URL of the Lottie file you want to use to the available field.

Next, open the Settings block under the Content tab to control the animation behavior. First off, select the trigger type to trigger the Lottie animation. There are 4 trigger types you can choose from:

  • Viewport: The Lottie animation starts playing based on the viewport high (the visible area of the device screen).
  • On click: The Lottie animation starts playing when a visitor clicks it.
  • On Hover: The Lottie animation starts playing when a visitor hover her/his mouse over it.
  • Scroll: The Lottie animation only plays when the page is scrolled.

You can also set enable the Loop option, enable the Reverse option, set the start/end point, and set the play speed. There is also an option to enable Lazyload.

To set the width of your Lottie file, you can go the Style tab. From this tab, you can set the width as well as adding a CSS filter just like when you are working with the Image widget.

If you want to apply a horizontal movement like the one on the example above, go to the Advanced tab. Open the Motion Effects block and enable Scrolling Effects. Click the Horizontal Scroll option. Set the direction, speed, and viewport.

Final words

If you want to download a Lottie file from the LottieFiles website, make sure to download the JSON file. First off, select the Lottie file you want to download and click the Download JSON button.

If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

This page may contain affiliate links, which help support WP Pagebuilders.

Subscribe to our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This