How to use Lottie Animations in React / Gatsby (Bodymovin)

Lottie Web is a great open-source-library for displaying animations on your website. Its main purpose is rendering animations that have been exported to a JSON file from Adobe After Effects using the Bodymovin plugin. This post will show you how to use the official Lottie Web library by AirBnB in a React Environment.

Watch on YouTube

Basic React Component

Even tough there are specific libraries out there that integrate Lottie player in react, we will use the official library by AirBnB. You can install it right into your current project, or create a new react app for testing.

npm install lottie-web

The main method we need from the library is the loadAnimation() method. It takes in an object that contains the configuration for the animation we are trying to load.

Most importantly, we want to specify a container property that references the element where the animation should be played, and an animationData property that contains the JSON data of the animation (which itself is just a JS Object).

Let’s create our basic component structure! But first, we will need to acquire a JSON animation from lottiefiles.com. Make an account if you haven’t yet (yes, it’s free). Find an animation you like, download the JSON and place it in your project folder. I placed it into a subfolder called “animations”.

Now, we can create our basic component. I will use modern React 16.8+ Syntax, using hooks and function components, because why not?

After importing lottie and our JSON file, we will create a div and ref using createRef(). I also put a class on my div just to apply a width and height to the container using css.

import React, { useEffect, createRef } from "react";
import "./App.css";

import lottie from "lottie-web";
import animation from "./animations/happy.json";

const App = () => {
  let animationContainer = createRef();

  return (
    <div className="App">
        <div className="animation-container" ref={animationContainer} />
        <div>Bodymovin Animations in React</div>
    </div>
  );
};

export default App;

Now the only part that is missing is loading our animation.json into our div. For that, we need to call loadAnimation with the correct options.

lottie.loadAnimation({
      container: animationContainer.current, // current instance of our container!
      animationData: animation, // animation file!
      renderer: "svg",
      loop: true,
      autoplay: true
    });

The properties container and animationData are strictly required. See the docs for all available loading options such as the other ones used above.

Finally, since we are referencing an object in our React DOM, we are going to have to wait until our component has mounted to use the reference. In a function component, this is accomplished with useEffect, passing an empty array as a parameter.

This is both componentWillMount and componentWillUnmount in one, so if you like, you can return a function to cleanup your method calls. This is not required but good practise.

We will also assign the loaded animation to a variable. This allows us to call methods such as stop(), destroy() or setSpeed() directly on the animation instance. Do check the docs to see all the available methods!

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: animationContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: animation
    });
    return () => anim.destroy(); // optional clean up for unmounting
  }, []);

Once you have added this Effect to the component, you can start your server and you should see your animation!

Final Notes

This is the best way to use lottie animations in your react project, because it uses the official library by AirBnB. There are libraries out there for react that also depend on this library – but these simply didn’t work for me. Using the official library ensures the smallest bundle size and also ensures you’re familiar with the actual API.

I have tested this with Gatsby and Create React App and it works like a charm. Will add a jsfiddle or similar later!

If anyone has used this on a server-rendered react configuration, let me know in the comments how that works for you!