This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button and set it to play an animation and download a free eBook upon clicking it.
You may have noticed lately that UI animations are gaining a lot of popularity in the web design domain. Web creators have many options for how to add animations to the websites they build. Personally, our favorite these days is using Lottie animations, even though alternative methods such as creating SVG animations, or vector animations using After Effects, are also great.
In terms of added value for the website visitor or interface user, animations are a great friend of user experience. Because user experience thrives on exciting micro-interactions and grabbing user attention in a subtle, elegant way, well-crafted animations are a game-changer when it comes to crafting a user-friendly interface.
If we narrow our discussion one step further, one of the most effective use-cases for animation design is animated buttons. Call to action buttons are often one of the most significant design elements on a page, and if animating them increases their clickability, then they’re definitely something we’ll want to pursue.
In this post, we are going to dive into how to use the Lottie widget to create an animated button on your Elementor site.
1. Get Started With Lottie Widget
The first thing you’ll do is search for ‘Lottie’ in the Editor, and drag it to where you want it on the page. This is where you’ll choose the source for your Lottie file.
You have two options for how to do this, both in the Content tab of the widget:
- Use an external URL by simply copying the online Lottie Animation link and pasting it into the Editor
- Set the source to Media File, and upload your own Lottie Animations*
*In this post, we’ll go through the process of uploading a Lottie file.
2. Customize Your Button in Lottie Editor
The first thing we make sure to do before choosing an animated button from the Lottie Editor is checking that it matches our website’s color palette, typography, and any other design schemes you have decided upon for your site’s branding. We do this customization inside the Lottie Editor itself.
Once you’ve customized the button, you’ll download it as a JSON file.
3. Upload Your Lottie File
Then, back to the Lottie widget inside Elementor, where you’ll drag in the JSON file to upload it and insert it into your page.
Once it’s inserted, you choose its alignment and turn it into a real button by setting its link to Custom URL.
4. Choose Your Animation Preferences
Now for the actual animation and its play preferences, which you will customize under Content >> Settings.
We start by making sure the animation plays according to our preferences, and set its trigger to “On Click”.
You can opt whether or not to select Loop, which means it will either continue playing or play once. Take note that when you do select Loop, you can choose how many times it will play before it stops.
5. Style Your Button
Next, you’ll go to the Style tab, where you can adjust the sizing of the button, along with your usual styling options.
6. Upload Your JSON File
Lastly, you’ll want to add your button’s direct download link, which also includes uploading your file to the media library.
Select on any image to link it to your button, and then copy the URL and paste it into the Lottie widget’s link field. Make sure you’ve selected “Custom URL” as the link option.
In order for your file to download automatically, all you need to do is click on link options and add this custom attribute: download = “true”
Enjoy Your Animation
Congratulations, you officially know how to use the Lottie Widget as a button and set it to play an animation and download a free E-Book at the same time.
Once you’ve added your Lottie animations to your site, your website, and especially your buttons, will only thank you. And more than that, they’ll reward you with great user engagement results.
