Adding animations to your website with Lottie

Lottie is a JSON-based animation format, and compatible with the web, mobile, and even classic OSes!

This format was created by Hernan Torrisi in 2015 (for a plugin called Bodymovin)

Unlike GIF or video files, Lottie allows you to display vector animations and therefore maintain excellent quality, with a reasonable file size.

It's possible to create your own Lottie files, directly from Adobe After Effect, or you can find thousands of free ones on the reference site LottieFiles!

Here's an example animation:

Why use Lottie?

Even though we've already covered several points in the introduction, here are the 4 main advantages of these animations:

• Lightweight: JSON files are much smaller than GIF or video files, which improves performance.
• Quality: Being vector-based, these animations remain sharp on all types of screens, including high-resolution displays.
• Customization: Lottie animations can be dynamically controlled via JavaScript to respond to user interactions.
• Compatibility: They work on all modern platforms (web, iOS, Android).

And as a bonus: They're very easy to use.

That's exactly what we're going to see right now!

Adding a Lottie animation

As you've probably understood, the Lottie format is not a native format supported by web browsers.

We therefore need two things to display our animation:

• The animation player (the "player")
• A .json file containing an animation (vector shapes and movements)

Let's now look step by step at what's needed to add an animation to a web page

Adding the Lottie library

To use a Lottie animation, we start by including the player's JavaScript library. You can add it via a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

But you can also install it via NPM.

Creating a container for the animation

Next, we add a <div> that will hold the animation:

<div id="lottie-animation" style="width: 300px; height: 300px;"></div>

Getting an animation

You can:

• Create your own animations in After Effects or Figma
• Download free animations from platforms like LottieFiles
• Use an animation hosted online

Loading the animation with JavaScript

Finally, simply add the following code to load your JSON file and play the animation:

<script>
  const url = 'https://lottie.host/4cd4722c-4ef5-420b-9498-353eef9a35d1/0VLW6C9OUi.json';
  var animation = lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: url
  });
</script>

Note that it's recommended to replace the content of the url variable with the local path of your JSON file.

Compatible with all frameworks

As we've already mentioned in the article, Lottie is compatible with many technologies, and if you're looking for what you need, it's definitely here:

Web

Vanilla: npmjs.com Link

VueJS: npmjs.com Link

React: npmjs.com Link

Angular: npmjs.com Link

Svelte: npmjs.com Link

Mobile

Flutter: pub.dev Link

React-Native: npmjs.com Link

.Net MAUI: github.io Link

iOS: github.com Link

Android: lottiefiles.com Link

Desktop

MacOS: github.com Link

Windows: microsoft.com Link