Lottie is a great tool when it comes to adding beautiful and stunning animations to your site for Free, there are some paid options as well but we believe free animations are God Gifted.

So in today’s very short tutorial, we’ll see how to animate the Lottie Animation on Hover or Click. If you want to learn the basics of the Lottie Module and how to use it then you might wanna follow this article. 

Let’s get started

First of all, you have to enable the Divi Builder on the Page you want and select any animation from the Lottie Files website. Below is the Animation we’ll use and we need to download the Animation’s .Json file.

Okay, as we have chosen the animation it’s time to put it on your site. Simply add the “Supreme Lottie” Module

Now you need to upload the JSON file. Simply click the “Upload” button in the Module Settings. You don’t need to worry about JSON file uploads because Divi Supreme has enabled it for you. You can go to Plugin Settings -> Misc for more info about JSON file upload.

Now you need to enable the “Trigger” Option and choose the Trigger method. Below we’ve set it to “Play Animation on Hover/Mouse Over”. And now the animation will only play when you’ll hover over it.

And here’s how the animation will work.

It doesn’t end here, we’ve something more to talk about. You can do different things with the Animation when the user moves the mouse away from the Animation.

Here’s how all those 3 options work.

Mouseout action – Stop

When you’ll move the mouse away from the Animation it will stop the Animation and when you’ll hover again it will animate.

Mouseout action – Pause

When you’ll move the mouse away from the Animation it will Pause the Animation and when you’ll hover again it will animate.

Mouseout action – Reverse

This is one is interesting because when you’ll move the mouse away from the Animation it will reverse the animation and provides a nice effect.

Those effects looks pretty nice, right? But it doesn’t end here lets see how to Animate the animation on click. It’s just that simple, you’ll have to change the trigger method to “Play Animation on Click”. And that’s it.

And now the animation will only play click. Like here

In many cases you might found one of the mentioned trigger methods and effects useful to implement on your site. So we decided to share it with you. Hopefully you’ll find this useful. Please let us know what you think about this in the comments section below.

Have a great day!