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!
How to access the Divi Lottie Module
The Divi Lottie Module is also included in the Free version of the Divi Supreme but if you want more features and functionalities such as mouseover animation, you have the option to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.
Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.
So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Lottie Module in the comments section below.
Or try out the Divi Supreme Lite
Divi Supreme Lite Offers 20+ Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.