How to Add Lottie Animations to WordPress (with Video)

Lottie is a free online tool you can use to add beautiful, lightweight animations to your WordPress website. You can use these animations anywhere on your WordPress website to breathe life into even the most mundane pages and posts.

You can create animated headers, animated buttons, and even add animations that react to the users scrolling, the likes of which you only see on the most well-designed websites.

lottie animations on wordpress
Lottie animations help you create animated headers, animated buttons, and scroll-triggered animations.

If you want to animate your website too, here’s how you can add Lottie animations to your WordPress Website using Elementor for free.

Installing the Premium Addons for Elementor Plugin

The easiest way to add Lottie animations to Elementor is by using the Lottie widget in Elementor Pro. However, if you’re looking for a free alternative, the Premium Addons for Elementor plugin is the next best option.

After installing and activating the plugin, a new widget will be added to your Elementor editing mode. Needless to say, you’ll need the free Elementor page builder plugin from the WordPress repository before you proceed.

To add this widget, search “Lottie” in the widget area. Then, drag and drop the widget wherever you want just like you would any other Elementor widget. You can check out our Elementor tutorial to learn more about using the Elementor page builder.

lottie widget in elementor
Adding the Lottie widget in Elementor.

The file source option lets us add animation files to the page. We can either import animations through a URL, or we can upload the animation file from our computer.

Importing a Lottie Animation

Now, head over to the LottieFiles website to download the animation. Click “Get started for free” and sign up using any of the options. After signing up, click “Animations” in the menu.

Here, you can either choose from the list of featured animations or you can use the search bar to look for something specific.

lottiefiles website
Choosing an animation on the Lottie website.

Selecting an animation will bring it into a pop-up. Here, you can view the complete animation using a slider. If you like it, copy its Lottie Animation URL provided below.

Then, head back to your Elementor editing page. Paste the copied URL in the “Animation JSON URL” field below the File Source option. This animation will instantly become available on your page and you can customize it just like any other Elementor widget.

You can customize the animation itself by making it loop, play it in reverse, or changing its animation speed using the options in the Content tab in the sidebar. Also, you can customize its behavior on the page by creating a trigger for it to start playing. You can choose the viewport, hover, or scroll as triggers.

customize animation in lottie editor
Customizing an animation in Elementor.

With the viewport option, the animation will only run when it comes on screen. With the hover option, the animation will only work when the user’s mouse pointer hovers over it. Finally, the Scroll option lets you match the animation to the user’s scrolling.

You can customize the widget’s properties too. You can resize it, rotate it, align it on the page, and even add a clickable link to it.

In the Style section, you can change the background color of the animation to blend it on your website. You can also alter its opacity and add a border to the animation by defining its border radius and padding.

lottie widget style options
Style options for the Lottie widget.

Finally, the Advanced section lets us add further customizations for margins, motion effects, borders, responsiveness, and more.

Customizing an Animation in Lottie Editor

If you like an animation but it doesn’t match your website’s theme, you can customize its color properties in the Lottie Editor. Just click on the “Edit layer colors” button in the pop-up before copying the file URL.

lottie editor
The Lottie Editor lets you customize the colors of most animations.

On the left, you can see the various elements of the animation. Select the one whose color you want to change. On the right, we can see the various colors in that layer.

Select a color you want to change, and set a new one. Then, click Update. Do the same for all other colors in the layer. And re-color any other layers you want as well

lottie editor
Changing the color of an element in the Lottie Editor.

When you’re done, click the Download button under “Export as lottie JSON”, and save the file on your computer.

To import a customized Lottie animation, you’ll again use the Premium Lottie Animations widget just like before. But instead of an external URL, you’ll import the file from a media file. Then, upload the JSON file from your computer.

The customized animation has been imported. You can then edit it similar to before.

Use Cases

Let’s take a look at some of the use cases for lottie animations on our website.

1. Animated Headers

You can create beautiful animated hero sections for your homepage and product pages. Add the Lottie animation widget in the column and then paste the file URL.

animated headers with lottie animations
Creating animated headers using Lottie animations.

Keep the loop option enabled. And resize it to your preferences.

2. Animated Buttons

You can create animated buttons using Lottie animation that can go anywhere on your website.

animated buttons with lottie animations
Creating animated buttons using Lottie animations.

You can find many button animations on Lottie files. Paste the file URL on a page. Below, set the trigger option as hover. Then, enable the link option below. Select the link type and choose the page where the link should point to.

On the live page, when a user clicks on the animated button, they’re led to the shop page.

3. Scroll-triggered Animations

Scroll-triggered animations can be a cool way for your users to interact with your webpage. Plus, they’re easy to add.

scroll animation with lottie animation
Creating scroll-triggered animations using Lottie animations.

Simply set the trigger as Scroll. Below, change how fast the animation runs when scrolled. You can also choose the portion of the viewport where the animation will be active.

If you prefer a video version, please check the video below:

Further reading

LEAVE A REPLY