Today we are going to show you how to make a Lottie animation. But you must be thinking about what is little and why you should be concerned about it.
Well, Lottie animations can be a useful tool for your WordPress site. It makes it easy to add cool animations to your website. It’s a library created by the people at Airbnb that allows you to parse Adobe After Effects animation that was sent out as JSON with Bodymovin. Then, at that point, you can locally deliver them on your site (or in a versatile application).
So, we are going to show you how to make Lottie animation for your WordPress site. Go through the article and you will find exactly what you were looking for.
How to Use Lottie Animations on WordPress
Well, WordPress makes it easy for creating a website with a professional touch. With its collection of plugins, you can easily add anything to your website. And yes, there are plugins available that will help you add Lottie animation to your site.
There are two separate plugins to get the job done:
- WP Bodymovin – this free plugin will help you add Lottie animations. You can easily embed them anywhere on your site using a shortcode.
- Elementor – Elementor Pro includes a dedicated Lottie widget, and you can also find free extensions.
In any case, before we get to that, you first need to observe the Lottie movement that you need to utilize and get its JSON
Read: How to Add Banner in WordPress: Quickest Hacks to Attach Your Visuals
1. Pick an Animation and Find Its JSON File
To kick things off, you need to find an animation to use.
The simplest method for doing this is to utilize the LottieFiles site that we referenced. A considerable lot of the movements on this site are free and as of now utilize the legitimate Lottie JSON design, and that implies they’re really simple to remember for your substance. Just remember that the license on the free animations requires that you give attribution.
You can likewise observe bunches of different sources that give After Effects activities that you can trade utilizing the Bodymovin plugin. Be that as it may, this adds some additional intricacy, particularly on the off chance that you’re curious about After Effects. One great spot to search for this approach is Envato Elements.
However, we are going to stick to LottieFiles because it’s by far the easiest option. Go to the Animations area to find all of the free animations.
Once you’ve found the one you like, click on it to open it.
Then, click the Download JSON button to download the .json file to your computer
2. Add Lottie Animation to WordPress
When you have the JSON file for your animation, you are ready to display your animation in WordPress.
WP Bodymovin
At first, you need to install and activate the free WP Bodymovin plugin from WordPress.org. Next, go to Animations → Add New and you need to follow these steps:
- Give it a title to that will help you remember it.
- Transfer the JSON record utilizing the JSON Data document picker
- Click Publish to transfer the record and create the preview
Now, you should see a live preview of your animation.
Underneath that, pick your Animation renderer -we suggest leaving it as SVG. Then, at that point, utilize the Shortcode generator to additionally arrange it. For instance, you would check the Loop activity box to make your animation repeat again and again. You can likewise add apathetic stacking and stop the activity when it’s out of the viewport to further develop execution.
Once you’ve made your choices, copy the shortcode. Then, at that point, you simply need to add that shortcode to the place where you need your animation to show up
And then you should see it on the front-end of your site:
That’s it! Just repeat the process to add more animations.
Elementor
If you have Elementor Pro, Elementor as of now incorporates its own Lottie activity gadget that you can use in your plans. On the off chance that you don’t have Elementor Pro, you can likewise observe free Elementor additional items at WordPress.org that give you a Lottie gadget free of charge. For instance, the free Animator pluign.
We use and suggest Elementor Pro so which we will use for this tutorial purposes.
To begin, everything you do is haul over the Lottie gadget where you need your movement to show up. Then, at that point, you can transfer the JSON record straightforwardly in the widgets’ settings.
And that’s it! You should see your Lottie animation in your design.
To control how it functions, you can grow the Settings segment in the gadget to control triggers, looping, playback speed, lazy loading, and more.
FAQ(s)
Are Lottie files free?
All free Lottie animations are under Lottie Simple License, so go ahead and use them without hesitation.
How do I insert animation in WordPress?
Optimize Your GIF. Add an Image Block to Your Page. Upload Your GIF File. Adjust the Image Size Setting. Insert Your GIF From the Media Library.
Is Lottie easy to use?
Despite their effectiveness, however, the process of getting animations implemented into multiple platforms has been anything but easy.
Lottie is an iOS, Android, and React Native library that renders After Effects liveliness continuously, and permits local applications to involve movements as effectively as they utilize static resources.
Who created Lottie?
Developed by Airbnb, Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. Animations are exported as JSON files through an open-source After Effects extension called Bodymovin.
Start Adding Animations On Your WordPress Site
Lottie animations are a very cool way to add some fun and increase engagements on your site. But, as this is a very technical concept it might be hard for some of you to understand. That is why we have tried to make the tutorial as easy as possible.
And if you go through the article you will easily know how to make a Lottie animation.