How to Use Lottie Animation in WordPress for Free

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 ElementorElementsKit 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
How to add Lottie Animation in Elementor for Free

Install and activate Elementor & Premium Addons.

Also Read: Essentials Addons for Elementor Review

Step – 2 
How to use Lottie animation in WordPress for Free

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.

How to use Lottie animation in WordPress for Free
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.

How to use Lottie animation in WordPress for Free
Step – 4 
How to use Lottie animation in WordPress for Free

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.

 How to add Lottie Animation in Elementor for Free
Step – 5 
How to add Lottie Animation in Elementor for Free

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 
How to add Lottie Animation in Gutenber

Install & Activate the Otter plugin.

Also Read : 10+ Best WordPress Gutenberg Plugins

Step – 2
How to use Lottie animation in WordPress for Free

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
How to use Lottie animation in WordPress for Free
How to use Lottie animation in WordPress for Free
How to use Lottie animation in WordPress for Free

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 
How to use Lottie animation in WordPress for Free
  • now scroll down and look for the “other” tab.
How to use Lottie animation in WordPress for Free
  • Toggle “Allow JSON & SVG Uploads ” to upload JSON file.   
How to use Lottie animation in WordPress for Free
Step – 5 

Now upload the JSON file, And select the JSON file. and you’re done.

How to use Lottie animation in WordPress for Free

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

Leave a Comment