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.
- 5 Ways to Increase Maximum Upload File Size in WordPress
- How to Prevent Copy-Paste & Text Selection in WordPress
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 to your content. You can also use the LottieFile Marketplace or Envato Elements too.
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 shortcode. Then, you just need to put the shortcode where you want your animation to appear:
Add then you should see it on the front-end of your site:
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.
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 the 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.