• What is Lottiefiles?
• What is a Lottie?
• How do you use Lottie?
• Why did we use Lottie?
• How did we use Lottie in React?
• Sources

LottieFiles is a website and online library that provides a collection of animations in the Lottie format. The Lottie format was developed by Airbnb and is now maintained by the open-source community. LottieFiles lets you create, edit, test and "ship" a Lottie in a very easy way.

According to the website, " a Lottie is an open-source animation file format that’s tiny, high quality, scriptable, interactive, and can be manipulated at runtime".

A Lottie is a JSON-based animation file format which you can you use on any platform. They're small files that can work on any device. Since they're SVG animations, they can scale really well without having pixelation issues.

A Lottie animation can be created in any design tool, like Figma or AfterEffects and use the Lottie plugin to export these kinds of animations as a Lottie.

I'll quickly explain here on how to use Lottie in your project. This can also be read on the LottieFiles website.

1. Add the following script tag for the LottieFiles web player component into the section of your HTML: <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

2. Get the URL of the animation. This can be a self-made JSON file that's in your working directory or a public URL from the LottieFiles website.

3. Add the <lottie-player> element into your HTML, pointing to the URL of the animation, for example: <lottie-player src="<URL HERE>" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>