Lottie

Lottie files is a great way to bring a little bit of animation to your page with a small footprint of an animated graphic similar to what we are used to with GIFs or GIFs. On this page, I have this unobtrusive Lottie file here just for a little bit of flair and to draw the attention of my visitor when they come to my page. This is done with the Lottie element. A little bit more about Lottie if you have never worked with it. Lottie files is a format in which you can bring animated graphics to your pages, social media, and to your websites. To use them, you can sign up for free at lottifiles. Com. There are also other platforms and other graphics stock sites that will have Lottie files that you can download, but this is usually the place where you will start. They are free and there are premium options. There's a lot of free stuff. As mentioned, you need to sign up for a Lottie files account. There's no way you're going to download from them without without signing in. And once you've done so, you can start browsing through their library of Lottie files, as I said, both free and premium.

Before we do that, let's go have a look at what I've got here already. To bring in a Lottie file, you go to the Add elements, and then from the elements panel on the left, you will find the Lottie file over here, and you can also search it at the top. Click, Hold, and Drag, and drop it where you want it to go. There's a little Lottie animation already in there. Click on it to interact with and then all the way to the left is where we access the options for the Lottie file. For the majority of cases, you're going to leave all these settings just like it is. The only thing that you're going to change immediately is the Lottie link. There are two ways you can bring an animation of a Lottie file. The first one is a link, and the second is to upload a JSON file. Let's start with the link. Very easy. We go to lottiefiles. Com, and on their landing page, they have a few legendary creators and their creations. You're going to have a look. I'm just going to select one here. Let's select this star down here.

You have control over how this animation works by looking at all the settings down here. Once you have You're on through that and you want to bring this animation onto your page, you go over here to the Lottie animation URL. Click on the copy and then go back, and in the builder where the Lottie link is, highlight the current one and then paste the new one, and it will update very quickly. We will talk about the Lottie file soon, but let's have a look at these options down here. The Renderer gives you the option to choose between SVG and Canvas. Don't get too technical here. If you just use one or two Lottie files on your site, SVG is the way to go. It's always going to give you a clearer image. It could be that you have a very complicated Lottie file or many Lottie files on a web page, and you can see that the animation is just a little bit stocky and skipping and hopping around. Then you choose Canvas. It's not going to give you that super sharp rendering. It's not going to be that sharp, but it's going to give you the smooth animation.

So we leave it on SVG. Autoplay means the animation starts playing as a person loads the page. You can also reverse the Lottie. You can let it play just once, and then you have control over the speed. And you can make it go much quicker, but a setting of one is preferable. These are the settings for the Lottie animation. Nothing to it. Let's look at the second way you can bring in a Lottie file, and that is with the Lottie file, jsonupload. Let's go back to lottifiles. Com, close this one, and we choose another animation, this little purple monster here. Up here, you will see Download. Select Download. From the drop-down, you see there are a number of ways you can download this one, and the one that we will focus on is the Lottie JSON. I'll click on Lottie JSON, and the quick download already appears here in the bottom left-hand corner. Let's go back to our builder. Now, where the Lottie file appears, I'll click on the plus. This opens my folders, and I can just select the JSON file, and it will overwrite the link that I've brought in. You see that disappears, and now we have this monster typing away. Same options like the previous one.