WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Add Lottie Animations in WordPress: A Detailed Guide

Last Updated on July 28th, 2023

Tags: , ,

In this fast-paced world, the demand of animations is getting higher & higher. People worldwide like to view different animations online and respond to them. Out of which, Lottie animations have gained a lot of attention because they enhance user experience and improve interactivity. 

Are you using a WordPress platform and looking for an easy way to include Lottie animations? Then this post is going to help you out.

In this blog, we will provide different ways to include Lottie animations in your WordPress site. Before that, we will explain what Lottie animations are, how they work, and reasons to have them on your WordPress site.

So, let’s start.

What are Lottie Animations?

Lottie is an open-source library consisting of animations developed using Adobe After Effects by the folks at Airbnb. These animations are exported in JSON-based file format using Bodymovin. Lastly, the animations are parsed on the website or app for effective display. 

The ultimate purpose of Lottie animations is to improve user experience by adding attractive elements to the apps, websites, web apps, and more. These animations can be simple graphics to highly interactive animations.

In a nutshell, Lottie makes it really easy for you to add cool animations to your WordPress site (or any other website).

If you want to learn more about the format itself, you can check out Airbnb’s introduction post.

Examples of Lottie Animations

The best way to figure out what Lottie animations are and how they might be useful is to experience them yourself.

To do that, you can head to the LottieFiles website and take a peek.

Article Continues Below

You can browse through many different animations for various use cases and niches. Many of these animations are free to use. However, they are licensed under the Creative Commons – Attribution license, which means you can use them for free, but you need to provide attribution on your website.

How Lottie Animations Work?

As we have mentioned earlier, Lottie animations use JSON as their format. Basically, this means that they don’t work like a GIF or “regular” animated image. Instead, they’re a big code file that looks something like this:

wordpress lottie animation code

Yes, this huge collection of random-looking JSON code is what turns into those cool animations on the front-end of your site.

However, because Lottie animations use this format, you can’t just add them to your site like you could a GIF. That’s where the rest of this post comes into play.

Why Use Lottie Animations on WordPress Site? 

Here are some reasons you should include WordPress Lottie animations. 

  • Improve page load speed: They are smaller than GIFs, so they can improve animations on your site without affecting the speed.
  • Display perfectly in any resolution: You can scale up or down the Lottie animations for WordPress whenever you want, as they are based on vectors. In other words, they display perfectly in any resolution and size.
  • Works well with your brand identity: Ability to customize the Lottie animations to reflect a particular brand or identity. 
  • Multi-Platform: Lottie animations work well on the majority of platforms like Android, iOS, web, React Native, etc.
  • Highly-Interactive: Developers can create highly-interactive animations that respond well to human emotions like scrolling, clicking, and hovering.

How to Use Lottie Animations on WordPress?

There are different ways to include the Lottie animations in the WordPress website. Here, we will explain how to add Lottie animations on the WordPress website manually and also using different plugins. So, let’s start.

1. Use HTML & JavaScript

Here is the step-by-step process to include Lottie animations in WordPress using HTML and JavaScript.

  • Add a script tag for the LottieFiles web player

LottieFiles holds the <lottie-player> web component, which lets you include the Lottie player at any place on the web page. To integrate the web component, you need to have the URL of the player and include it in the <head> section or wherever you want on the page.

<script src=”https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js“></script>
  • Fetch the URL of the Animation

You have two options to fetch the URL of the animation. They are as follows.

Host it Yourself: In case you have created or downloaded a specific Lottie animation and want to host, upload it to the JSON file on your website. Fetch the URL that is attached to the file.

Article Continues Below

Download from Lottiefiles: Visit LottieFiles and copy any public URL of the animation you like on the website.

  • Include <lottie-player> element pointing to the URL of the animation

As soon as you get the URL, you can copy and paste the code into the HTML of the web page. 

Interchange <URL HERE> with the URL of the Lottie file. Ensure that Lottie URL is present in the double quotes.

<lottie-player src=”<URL HERE>” background=”transparent” speed=”1″ style=”width: 300px; height: 300px;” loop controls autoplay></lottie-player>

It is ready. Save and preview it.

2. Use Otter Blocks Plugin

To insert Lottie animations using the Otter Blocks Plugin, you need to download it from the WordPress directory. Head over to the plugins section of your WordPress site, search for Otter Blocks, install and activate it.

otter blocks plugin for wordpress lottie animation

To include animation on your website, you need to download it. For the same, visit Lottie Library and pick your favorite animation. To view all the animations in the library, you need to create an account.

After creating an account, hover over the Products and then choose Free Animations.

lottiefiles animations wordpress

As soon as you find an animation that you want to include, click on the design. Now, you can make changes to the animation, like speed, color, etc.

lottie editor animations for wordpress

If you click on the edit animation, you will be redirected to the Lottie Editor, where you can modify the animation as needed.

After customizing the animation as needed, you have two options to download the animation. You can either copy the Lottie animation URL or download the animation by clicking on the download button.

Article Continues Below

lottie animation url for wordpress

Now, go to your WordPress site or blog. Then, go to the desired page or the post where you wish to include the animation.
Click “Add a New Block” and then look for the “Lottie Animations”.

To insert the block in the page, you have two options as follows.

  • Insert via URL: Paste the URL you have copied from the LottieFiles site.
  • Upload: This option is feasible if you have downloaded the animation from the LottieFiles site.
insert lottie animation

After this, the animation is displayed on the page as needed.

You also have the option to customize the animation using the Otter Blocks plugin.

3. Use Elementor Pro Plugin

In this case, you need to visit the LottieFiles website, either download the JSON file of the animation or copy the desired URL.

If you have Elementor Pro, Elementor already includes its own Lottie animation widget that you can use in your designs. If you don’t have Elementor Pro, you can also find free Elementor add-ons at WordPress.org that give you a Lottie widget for free—for example, the free Animentor plugin.

We use and recommend Elementor Pro, which we’ll use for this tutorial.
To get started, all you do is drag over the Lottie widget where you want your animation to appear. Then, you can upload the JSON file directly in the widget’s settings (Elementor will warn you that it needs to enable JSON uploads to do this – WordPress disables them by default):

add lottie widget in elementor

And that’s it! You should see your Lottie animation in your design.

To control how it works, you can expand the Settings section in the widget to control triggers, looping, playback speed, lazy loading, and more:

elementor lottie widget settings

4. Use LottieFiles Plugin

use lottiefiles plugin

You can even include animations in the WordPress site using the LottieFiles plugin. You need to download the LottieFiles from the WordPress directory.

After installing the plugin:

  1. Insert a new block using the WordPress Gutenberg editor.
  2. Go with the “Lottie” block and add it.
  3. Include the animation from the media library or the URL.
  4. Preview the animation using the Gutenberg editor. You can also modify the animation from the right-hand side panel.

Final Words

Lottie animations are an excellent way to add fun and engagement to your WordPress site and improve your brand identity. Now, you must have understood the process of adding Lottie animations using different methods.

You can choose the Lottie animations considering the need of your brand and include the animations according to your desired way.

Do you still have any questions about how to use Lottie in WordPress? Ask in the comments!

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.