These days we cannot make a website without any interactive element (moving element) as it might look dull and not engaging. But moving elements such as animated illustrations or images can be hard to find (especially copyright free).
Now you can use gifs to add moving or animated illustrations, But this isn’t a good idea as it is very amateur. And adding SVGs doesn’t make sense if you’re using WordPress.
And this is where the Lottie animations come in. You can use Lottie animations with HTML .NPM,WordPress,etc. But in this, we are going to focus on How to use Lottie animation in WordPress for Free.
Overview –
1. What is Lottie Animation?
2. Airbnb’s Lottie alternatives
3. How to use Lottie animation in WordPress for Free
Also Read : How To Make Blob Shapes With Just One Click
1. What is Lottie Animation?
Lottie Animation by Airbnb is a JSON-based animation file format that allows us (developers) to ship animations on any platform. Lottie is a vector and text-based file format and it is open source.
Lottie animations can be scaled up or down without any pixelation and they are small files.
You can integrate Lottie animations with free Lottie players with web, iOS, Android, Windows, QT, Tizen, and other platforms. Lottie animations are lightweight as they are relatively smaller than PNG and GIFs. You can also convert SVG to Lottie, edit Lottie animations online without a line of code.
2. Airbnb’s Lottie alternatives
Well, there are not that many alternatives for Lottie animations.
But there are a few decent alternatives you can try.
1.Haiku Animator
2. Marionette Studio
3. Animation Desk
—————————
4. Readymag Animations
5. Colorbox by Lyft
Also Read:5 Best Airbnb WordPress Themes in 2021
1.Haiku Animator
Haiku Animator is probably the best Lottie alternative. Haiku Animator allows you to create engaging animations for any website or app. You can also create Lottie files without After Effects. It is also Free and open source.
2.Marionette Studio
Marionette Studio is an online animation software/platform for beginners and professionals. It is also a great alternative to Lottie. It allows you to animate 2D characters and environments.
3. Animation Desk
Animation Desk is one of the best platforms for creating professional-looking animations.
How to use Lottie animation in WordPress for Free
There are quite a few ways to add Lottie animation in WordPress for Free. But I am going to show you the easiest and quickest ways.
1. How to add Lottie Animation in Elementor for Free
Using a page builder like Elementor makes it very easy to add Lottie to WordPress.The free version of Elementor doesn’t provide any widget for Lottie animations. But the Pro version comes with a Lottie Animation widget. However, you can add Lottie Animation without Elementor Pro. There are a lot of free addons for Elementor that come with Lottie Widget ( Premium Addons for Elementor, ElementsKit Elementor addons, etc.)
Here we will use Premium Addons’ Lottie widget to add Lottie Animation, We are using the Premium Addons’ Lottie widget because it is highly customizable. You can use ElementsKit‘s Lottie widget as well.
Step – 1
Install and activate Elementor & Premium Addons.
Also Read: Essentials Addons for Elementor Review
Step – 2
Now go to lottiefiles.com and create an account. Once you have created an account search for animations from the search bar (here, marketing).
Or you can go to the marketplace or free animations.
Step – 3
Once you have found a good animation, click on any animation, and a window will appear (as given). Now, click on download > Lottie JSON.
Step – 4
After downloading the JSON file, go back to the Elementor dashboard. Open a page with Elementor, and search for the Lottie widget. Drag and drop the Lottie widget.
Step – 5
Select file source = media file, Then upload the JSON file. And you are done. You can customize the animation using extra options such as loop, reverse, Animation Speed, Trigger, Size, etc. You can also render the animation as SVG or canvas.
2. How to add Lottie Animation in Gutenberg for Free
Gutenberg or WordPress block editor also doesn’t come with the Lottie Animation block, but we can use custom blocks plugins to add Lottie Animation. Here we will use a plugin called Gutenberg Blocks and Template Library by Otter, It comes with Lottie block.
Step – 1
Install & Activate the Otter plugin.
Also Read : 10+ Best WordPress Gutenberg Plugins
Step – 2
Go to Gutenberg editor & search for Lottie. Insert the block.
Step – 3
Now, follow the steps from 2 to 3 from Lottie Animation in Elementor.
Step – 4
Once you have finished downloading, Go back to your Gutenberg dashboard & click on upload (but before clicking on upload you need to activate “Allow JSON & SVG Uploads”. To Activate it follow the steps given below.
- Go to settings > otter
- now scroll down and look for the “other” tab.
- Toggle “Allow JSON & SVG Uploads ” to upload JSON file.
Step – 5
Now upload the JSON file, And select the JSON file. and you’re done.
Conclusion:
So now you know How to use Lottie animation in WordPress for Free. While putting Moving or animated is good for the user’s engagement but don’t put too many moving elements as they might become a distraction. The page performance might suffer as well.
Images : WordPress, Lottiefiles