Add animations to your React App using Lottie

Animations in our web or mobile applications are becoming more and more natural as time goes on. The last few years have seen a lot of adoption across small and large platforms.

I think a point is getting to where images from free repositories and illustrations are getting saturated.

Although there are many platforms with free (or paid) illustrations that are quite creative and beautiful, I think one of the differentiating factors is whether they are static or animated.

Exactly why I decided to write this article, using Lottie helps immensely in this whole process. Although we have the possibility to create our LottieFiles, we have access to an entire repository with several free animations created by the community.

There are several ways to use Lottie together with React and the most popular is the use of the react-lottie package, which has immediate compatibility with react and is still intuitive because we pass the appropriate animation information through attributes.

However today I'm going to use the lottie-web package, because this way you can apply the same knowledge in other libraries/frameworks.

Let's code

The only dependency we will use in this project is the following:

npm i lottie-web

But now we go to LottieFiles website to choose our animation.

For this example I chose this animation:

Now all we have to do is download the JSON file:

Now in your React project (src/) create a folder called animations (src/animations) and drag the JSON file into that folder. Then rename the file to duck.json (src/animations/duck.json).

Now we can create the React component to render our animation.

// @src/components/duck.jsx

import React from "react";

const Duck = () => {
  return <h1>Duck Component 🦆</h1>
};

export default Duck;

Now in our duck.jsx we are going to import useEffect() and useRef() hooks from React. Then we'll create a reference called anime to directly access the web element we're going to add our animation to.

// @src/components/duck.jsx

import React, { useEffect, useRef } from "react";

const Duck = () => {
  const anime = useRef(null);
  useEffect(() => {
    // Logic goes here
  }, []);
  return <div ref={anime}></div>;
};

export default Duck;

Now let's import the lottie-web and the animation we've chosen:

// @src/components/duck.jsx

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

import duckAnimation from "../animations/duck.json";

const Duck = () => {
  const anime = useRef(null);
  useEffect(() => {
    // Logic goes here
  }, []);
  return <div ref={anime}></div>;
};

export default Duck;

Now let's configure lottie to load our animation and let's add some properties:

// @src/components/duck.jsx

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

import duckAnimation from "../animations/duck.json";

const Duck = () => {
  const anime = useRef(null);
  useEffect(() => {
    lottie.loadAnimation({
      container: anime.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: duckAnimation,
    });
    // More logic goes here
  }, []);
  return <div ref={anime}></div>;
};

export default Duck;

Now we have to cleanup the useEffect() hook, this is because we want to stop the animation as soon as the component unmounts.

// @src/components/duck.jsx

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

import duckAnimation from "../animations/duck.json";

const Duck = () => {
  const anime = useRef(null);
  useEffect(() => {
    lottie.loadAnimation({
      container: anime.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: duckAnimation,
    });
    return () => lottie.stop();
  }, []);
  return <div ref={anime}></div>;
};

export default Duck;

Now just set the fixed dimensions for the animation because I don't want it to take up all the space that's available on the page.

// @src/components/duck.jsx

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

import duckAnimation from "../animations/duck.json";

const Duck = () => {
  const anime = useRef(null);
  useEffect(() => {
    lottie.loadAnimation({
      container: anime.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: duckAnimation,
    });
    return () => lottie.stop();
  }, []);
  return <div style={{ height: 250, width: 300 }} ref={anime}></div>;
};

export default Duck;

Now that we've completed our animation component, we can start working on our main page (App.jsx).

// @src/App.jsx

import React from "react";

const App = () => {
  return (
    <div>
      <h1>Lottie animations.</h1>
      <p>Lets use it with React.js</p>
      <br />
      <button>Click me</button>
      {/* Animation goes here */}
    </div>
  );
};

export default App;

Now let's import the useState() hook so we can control the local state of our component. The only state we're going to control is if the button is clicked. Because we'll want to show or hide our animation accordingly.

// @src/App.jsx

import React, { useState } from "react";

const App = () => {
  const [isClicked, setIsClicked] = useState(false);
  return (
    <div>
      <h1>Lottie animations.</h1>
      <p>Lets use it with React.js</p>
      <br />
      <button onClick={() => setIsClicked(!isClicked)}>
        {isClicked ? "Hide" : "Show"} duck
      </button>
      {/* Animation goes here */}
    </div>
  );
};

export default App;

Now just import our component and do a simple conditional rendering. Like this:

// @src/App.jsx

import React, { useState } from "react";

import Duck from "./components/duck";

const App = () => {
  const [isClicked, setIsClicked] = useState(false);
  return (
    <div>
      <h1>Lottie animations.</h1>
      <p>Lets use it with React.js</p>
      <br />
      <button onClick={() => setIsClicked(!isClicked)}>
        {isClicked ? "Hide" : "Show"} duck
      </button>
      {isClicked && <Duck />}
    </div>
  );
};

export default App;