article cover

How to Create Flawless React Animations with Lottie

Reed Bargerviews icon-
reactanimations
reactanimations

Animations can make for a better user experience in our React apps. To make good looking animations, however, can be a great deal of work and a lot of code.

I am going to show you how to use a very powerful library with react to make stunning pixel perfect animations that enhance our apps, without a lot of work.

The library I’m talking about is called Lottie. Lottie provides a totally different way for creating impressive animations by using animations that are produced in the popular program Adobe After Effects, which are important exported as JSON files.

Alt Text

And best of all, to find and use these animations, you don’t need to have the program Adobe After Effects.

Using Lottie Files

All you need to do is to use a completely free resource called LottieFiles. It a site that hosts ton of free and paid Lottie animations. So we’re going to do just that. Let’s say we want an animated React logo in our application (note that you can use any animation that they make available). I’ll personally choose the following React animation, where the React logo is spinning. From there, we can preview it and change things like the background color. When we’re ready to use it, we can download the animation’s JSON file by selecting Lottie JSON:

Alt Text

Regardless of how you’ve created your React project, you can put it in whatever folder you like. You can put it in the static folder in the root of your project. You can put it in an animations folder in the src folder. It is up to you, as we will be importing the JSON data from whatever the file path may be.

I chose to put my JSON file (called react-logo.json) in my static folder:

Alt Text

Installing Lottie-Web

Once that’s done, we’ll install Lottie by bringing in the package lottie-web.

npm i lottie-web

Note that is an alternative lottie package available called react-lottie, but it uses lottie-web under the hood which can be easily used directly as you’ll see in just a moment.

Once lottie-web is installed, we can place our animation within any JSX element by giving that we want it to live in a certain selector (most appropriately by using the id attribute, since it should only be used once in a given page/component).

For us, we might logically give it an id of react-logo:

// src/App.js
import React from "react";
export default function App() {
return (
<div>
<h1>Hello World</h1>
<div id="react-logo" />
</div>
);
}

To use lottie, we can import lottie from lottie-web and we’ll import the JSON from wherever we placed it:

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";
export default function App() {
return (
<div>
<h1>Hello World</h1>
<div id="react-logo" />
</div>
);
}

Using Lottie with useEffect

Using lottie itself is simple. We need to get a reference to the JSX/DOM element that we want to put the animation in and give it the JSON data.

To interact with the DOM itself, we’ll need to make sure the component has mounted, so we’ll use useEffect to perform a side effect and pass in an empty dependencies array.

In useEffect, we can now call lottie.loadAnimation to run our animation, by passing it an object. On this object, the first thing we’ll need to provide is the container, the DOM node that we want this animation to be run in.

We’ll can use any method we want to reference the DOM node; I’ll personally use document.getElementById('react-logo').

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";
export default function App() {
React.useEffect(() => {
lottie.loadAnimation({
container: document.querySelector("#react-logo"),
});
}, []);
return (
<div>
<h1>Hello World</h1>
<div id="react-logo" />
</div>
);
}

And with that container, we just need to supply the JSON data itself on a property called, animationData.

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";
export default function App() {
React.useEffect(() => {
lottie.loadAnimation({
container: document.querySelector("#react-logo"),
});
}, []);
return (
<div>
<h1>Hello World</h1>
<div id="react-logo" />
</div>
);
}

After that you should see the animation run automatically:

Alt Text

If you have the same code I have, and have your animation running in an empty div, it will look huge. You can fix that by providing some styles and fixing the width and height of the container:

<div id="react-logo" style={{ width: 200, height: 200 }} />

Lottie.loadAnimation properties

Along with container and animationData, there are some other important properties that we can pass to loadAnimation to change the animation’s appearance and function.

lottie.loadAnimation({
container: document.querySelector("#react-logo"),
animationData: reactLogo,
renderer: "svg", // "canvas", "html"
loop: true, // boolean
autoplay: true, // boolean
});

Above, I’ve included all of the default settings for loadAnimation. The default way the animation is rendered is as SVG, with the renderer property. This has the most features, but the HTML option can be more performant and supports 3d layers.

The animation loops or repeats infinitely by default because loop is set to true. You can turn this behavior off by setting it to false.

The animation’s autoplay setting is by default true, meaning the animation will play automatically when it is loaded. If you wanted to conditionally run the animation, you could set it to true or false by using a state variable (say if you wanted to play the animation only when it was visible).

Lottie Light

Finally, the last thing I’ll mention about lottie is that lottie-web is a rather large dependency. If you would like to use all of its features but are concerned about bringing in too much code into your final bundle, you can import the light version of lottie as follows:

import lottie from "lottie-web/build/player/lottie_light";

Final Code

Hopefully this post helped you get up and running with lottie as a neat feature to add to your React projects when you’re looking for something special in your web apps.

Take a look at the CodeSandbox link below if you’d like to play around with the final code yourself:

Edit on CodeSandbox



course cover
Join The 2020 JS Bootcamp Video Course 🏕️
Code ArtistryWatch Now
Reed Barger
Professional JS developer who loves to write. Here to make you a better developer, faster.