In this article we're going to discuss adding Lottie files to the Elementor builder. in the most recent public Elementor update, we were given access to multi step form and Lottie animations. we will be discussing what Lottie animations are, potential use case scenarios, and how to incorporate them into your website.

What are Lottie files?

"Lottie" or "Lottie files" or "Lottie animations" is a library that allows you to animate images using Adobe After Effects and render them natively on Websites, mobile apps, and more.

If you're looking to create your own Lottie animation, the workflow is quite simple. First, create your initial animation using Adobe After Effects. Then, using an Adobe After Effects plugin called Bodymovin, export it as a .JSON file. Here’s what that looks like:

Using Lottie, you can incorporate these animated images into web sites, applications, and other digital assets.

What's cool about the Lottie animation Is that you can set it up to play when the item enters the viewport, or you can connect it to user interaction. For example, You could animate a Lottie As the user scrolls down the page.

If you're not proficient in After Effects, or don't want to create your own animations, there are thousands of them freely available online, and even more behind $1-5 paywalls.

Elementor recently incorporated a native element into its builder which allows you to incorporate Lottie animations quickly and easily.

When would I use Lottie files in my website?

Using Lottie animations in your website is a great way to incorporate animated elements and interesting effects. Because you can connect A Lottie animation to user interaction, such as a page scroll, the possibilities are endless.

Instead of talking about potential use cases, let's look at some Lotties as well as the incorporation of Lottie files in real-world websites:

You can also use Lottie animations to replace existing technologies. Both GIFs and Lotties fulfill the same purpose - displaying animated sequences on a website. however, GIFs are double the size of a Bodymovin JSON and can't be scaled to various screen resolutions nicely. You can also animate an element by hand (for example, CSS animation) But that isn't an efficient use of your time as Lotties fulfill the same purpose much faster.

How can I add Lottie files to using Elementor?

Version 2.10 of Elementor pro shipped with two new elements: multi step forms, and Lottie animations. That means that the ability to add Lottie animations to your element or website is natively built into the editor. It comes in an easy to understand, use, and implement package. Let's take a look at how to add Lottie animations to Elementor.

Drag the Lottie element onto your Elementor canvas. It comes with a preset Lottie Elementor animation.

Adding the Lottie to your website is fairly easy. There are two ways of adding a Lottie tier website: you can upload your own JSON File, which is helpful if you choose to Create your own animations using Adobe after effects, Or you can Simply imported from an external URL. This is incredibly helpful if you are using premade Lottie animations to spruce up your website.

All you need to do is find an external URL, and incorporate it in your website. We are going to take a look at both of these methods of adding Lotties to your website.

Method 1: upload your own media file

The base form of a Lottie file is a JSON. If you're creating your own Lottie (which would be animated by Bodymovin) the default export is in this format. You simply take that export and upload it into your Elementor visual builder.

Sometimes when you purchase or acquire a Lottie file from a third party source, they will give you a JSON download. All you need to do is upload it into the builder, and you're good to go.

In the top right corner, you can see the download option on this green file available for free at lottiefiles.com.

It's really that easy to add a Lottie to Elementor!

Method 2: use an external URL

If you are acquiring a Lottie from an online repository, chances are they will provide you with a URL to directly incorporated into your website. This saves you the need of downloading and hosting the JSON file on your site, and is sometimes an easier and quicker option.

If you’re using lottiefiles.com, Under “use this animation in” Simply click HTML, and copy the URL directly into your Elementor builder.

Once your Lottie is added to the Elementor website, there are a collection of settings that you can manipulate. All of these settings are optional, but incredibly helpful when it comes to the integration into your website built with Elementor.

Let's take a look at each of the settings that you can change when incorporating a Lottie into your website. The first setting is the trigger. Because this is an animation, something will need to trigger it to start. You can choose between Multiple options.

• Viewport - this will animate the Lottie as soon as it enters the viewport. This is the default behavior of videos that autoplay, and GIFs
• onclick - this will animate the Lottie when the user clicks on the element.
• on hover - This will animate the Lottie when the user hovers their mouse cursor over the element.
• scroll - this will animate the Lottie as the user scrolls down your page. When the user scrolls up the page, the Lottie will be animated in reverse. This is really cool if you are trying to add user toggled motion effects to your website.

The next setting is dependent on the trigger that you have selected. Viewport displays if you have selected viewport or scroll. It dictates when the Lottie will begin to animate. For example, if you set top to be 50%, the Lottie will only begin its animation when it is 50% into the page.

If you select scroll, another setting will show up called “affects relative to scroll”. you can choose between two options, viewport or entire page. If you set up the effects relative to the viewport, as soon as the Lottie animation enters the viewport, it will begin It's animation as long as the user continues to Scroll down the page. If you select entire page, the Lottie will animate as the user scrolls (regardless of if the Lottie is in the viewport).

You can choose to set the Lottie to loop, and set the play speed. The play speed is correlated to the speed set in the initial after effects animation. If you set the play speed to be 2, the Lottie will be animated twice as fast as the after effects export.

You can use the start point and end point to select the respective points at which the Lottie begins or ends it's animation. You can choose between SVG or canvas to render the graphic, and you can also enable lazy load (which could help your page load quicker).

You can also size the Lottie animation within the style tab of the Elementor page builder.

Conclusion

As you can see, it's quite easy to add a Lottie animation to the Elementor builder. Utilizing the newly included native element in the pro builder, all you need to do his upload (or add a URL) and set up when your Lottie will animate.

If you have any questions about incorporating Lotties into Elementor, feel free to reach out in the comment section below.