In this tutorial, we will visit the LottieFiles website, where we will find a collection of free-to-use Lottie animations. A Lottie is a new JSON-based animation file format. The reason they are so popular is because of their small file size and, therefore, they don't slow down your website. A Lottie is also platform independent, as it can play on the web, mobile devices, desktops and even in apps.

The easiest way to check out some Lotties is to visit the LottieFiles website. This website is totally dedicated to all things Lottie. They have an extensive library of free Lotties and several tools that can help you view, edit and add Lotties to your website or app.

A good place to start is to click Discover - Free Animations (see screenshot) from the top menu, which will take us to the listing of free Lotties (see screenshot). You can filter the Lotties by those that are featured, new or popular. You can also filter by category or animator.

You will find all types of animations from a funny potted plant to animated characters. The Categories section has numerous categories, including page loaders, confetti, e-commerce, particles, social, 404 Not Found, hand gestures and more. They even have a beer category.

Of course, you can just do a search. I searched for my favorite pet, which is a cat, and I got quite a few cats (see screenshot). My favorite was Peekaboo Cat by Charly Hill (see screenshot). When you find a Lottie that you like, just click on the thumbnail to open the Lottie in a pop-up window. This window has a lot of information about the Lottie. Let's work our way downward (see screenshot).

1. At the top is the Download button. You can download the Lottie in several formats, but the one we want is the Lottie JSON file (see screenshot).


2. Lottie Animation URL: Click the button on the right to copy the url to your clipboard. This is the url to the .json file stored on the LottieFiles website. You will use it to add the animation to your project.


3. Animation Speed: Click the arrows on the left to change the speed from 1x to 2.5 (see screenshot).


4. Background Color: Click one of the colored circles or type in the HTML Hex color code. Click the X that will appear at the top right to remove your changes.


5. Embed Code: This is the iFrame code that you can add to the HTML for your webpage.


6. Use this animation in: By clicking on each of these buttons, you will be taken to other pages on and off the website for more information.


7. Interactivity: Clicking this button will take you to instructions for how to setup the interactivity library and how to use the code to add interactivity to your Lottie.


8. Edit Layer Colors: Click this button to open the animation in to the Lottie Editor, where you can make even more changes.


9. QR Code: Use the QR code to test your Lottie on mobile device.

There is also a comment section at the bottom left. Many times other members ask the animator questions about how the Lottie was created.

LottieFiles Website
https://lottiefiles.com

Images and screenshots of Lottie and LottieFiles used by permission of Design Barn Inc.