Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Video Transcript
Hi! This is Barbara and welcome back to Wicky Design.
In today’s video, we are going to talk about Lottie animations. Lottie animations are small, JSON based animation files that work on any device and can be scaled without losing quality. Believe it or not, Lottie was created by Airbnb. Yes, that Airbnb.
These animations are fun and eye-catching and when added to your website, will give it a neat, interactive element.
I got to add Lottie animations to a recent website redesign that we did for one of our clients. I love how the animations add a fun interactive element to this design. If you’re interested in learning more about this project, and seeing what this site looked like before our redesign, you can click the link to the portfolio page in the description box below.
A few months ago, Elementor added a Lottie widget to their page builder that makes adding Lottie files to your website really easy. In this video, I’ll show you how easy it is to add Lottie files to your site using Elementor.
The first thing you’ll need to do is download your Lottie file. If you’re an animator and know how to use After Effects, you can create your own Lottie animations. Airbnb has lots of documentation on how to do this.
If you’re like me and aren’t an animator but still want to use this for your website design, you’re in luck. There are hundreds of animations available at Lottiefiles.com. This site has both free and paid downloads and gets updates all the time with new animations. This is a great resource for finding fun Lottie animations for your project.
Once you’ve found the perfect Lottie animation, you’ll want to download the JSON file. Before you do that, there is an option to change some of the settings such as the background color or animation speed. What you can change really depends on the file and some files may have more options than others. After you’ve made your customizations, click the button that says download JSON.
The next step is to open the page you want to add your animation to in Elementor. Search for the Lottie widget and drag it over to your page wherever you want it to be placed. Now, you’ll want to upload the Lottie file that you just downloaded.
There are some additional options you can change within the Lottie widget. You can set your alignment and have the ability to link your Lottie file as well. Under the settings tab, you have different viewport options, the ability to loop the animation, as well as the ability to change play speed, the start, and endpoints, or reverse the animation. You also have the ability to render the animation as an SVG or canvas and the ability to lazy load it on the page.
Over in the Style tab, you’re given additional options to set the width and opacity. The advanced tab has the same options as any other Elementor widget, so if you need to do any further advanced customizations, you can apply those changes here.
I love that Elementor has added this widget to their page builder. They’ve made it so easy to use and having this feature available will make website designs more interesting and fun.
That’s it for today’s tutorial. If you liked this video, please give it a thumbs up, subscribe to this YouTube channel, and ring the bell to receive notifications whenever we post a new video. See ya next time!
