How to Add Powerful Lottie Animations on WordPress in 2021?

lottie animations

If you may be already familiar with Lottie Animations or you don’t have any idea what it actually meant, don’t worry I will be helping you out via this post. For now, you only need to know that Lottie Files makes it easier to add animations to any website. So, without wasting your time let’s get straight into it.

Also Read:

What are Lottie Animations?

Lottie Files are simple JSON animation files that makes it easier for you to add some super cool animations to your WordPress with ease. It’s a animation library that lets you use Adobe AE animations exported as JSON with Bodymovin. Then, you can natively render them on your website or in a mobile app.

How to use Lottie Animations on WordPress?

There are a couple of WordPress Plugins available in the WordPress repository that you can use to add a Lottie Animation to your WordPress.

In this blog post, I will guide you to use three different plugins to add a Lottie Animation:

  • WP Bodymovin– It lets you add Lottie Animations and embed them anywhere on your website using shortcodes.
  • Animentor for Elementor – It lets you add Lottie Animations to your website using Elementor. It basically adds a Lottie Widget in Elementor.
  • Elementor Pro includes a dedicated Lottie Widget similar to Animentor with additional settings.

You’ll first need to find and download the Lottie Animation JSON File you can use.

Picking an Animation and Find its JSON File

The easiest way is to use the LottieFiles website. You’ll find hundreds of free to use animations already available in proper JSON format, which means they can be added easily in your content. You can also use the LottieFile Marketplace or Envato Elements too.

lottie animations 3
Lottie Files Dashboard

You can also find lots of other sources that provide After Effects animations that you can export using the Bodymovin plugin.

Adding Lottie Animation on WordPress

1. Using WP Bodymovin Plugin to add Lottie Animation to WordPress

Let’s begin WP Bodymovin Plugin from WordPress.org. Then, go to Animation 👉 Add New and follow the steps:

  • Give a new animation a new name.
  • Upload the JSON File using JSON Data File Picker.
  • Click Publish to upload the JSON File.

Now, choose Animation Renderer – I recommend leaving it as SVG. Then, use the Short-code Generator to configure it more. Once you’ve made your choices, copy the short-code. Then, you just need to put the short-code where you want your animation to appear:

Bodymovin
Bodymovin Plugin LottieFiles

Add then you should see it on the front-end of your site:

lottie animations 6
Lottie Animation using Bodymovin

2. Using Animentor/Elementor Pro Plugin to add Lottie Animation to WordPress

Animentor is an add-on plugin that works fine with Elementor Free version. If you already purchased an Elementor Pro. This tutorial will work for both of these plugins.

Lottie Animation Elementor Pro
Lottie Animation Settings – Elementor Pro
Lottie Animation Settings - Animentor
Lottie Animation Settings – Animentor

Using Elementor Pro, let’s start by dragging the Lottie Animation Widget where you want them to appear. Then, you can either upload the JSON File Directly in the widget’s settings or use the Media URL of JSON File from Lottie. Fire up the settings. And That’s it.

In the end:

So, in the end, we’ve successfully added Lottie Animations to our websites. Lottie Animations are super cool to add enhancements to your WordPress and increase engagements too. If you’re using Elementor, Animentor & Elementor Pro, both of them do their jobs well. But if your site receives good views. I would definitely recommend using Elementor Pro to decrease dependency on third-party addons.

Leave a Comment

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

Scroll to Top