Add animations to your React App using Lottie
Tags: javascript, react, node
Published: 2021-07-12 17:21:58

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](https://lottiefiles.com/what-is-lottie) helps immensely in this whole process. Although we have the possibility to create our [LottieFiles](https://lottiefiles.com/), 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.

![lottie free animations](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626108526/Screenshot_2021-07-12_at_17-47-50_Featured_animations_from_our_community-min_qzx00f.png)

For this example I chose [this](https://lottiefiles.com/67908-duck) animation:

![duck thumbs up lottie animation](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626108658/Screenshot_2021-07-12_at_17-50-30_duck_on_Lottiefiles_Free_Lottie_Animation-min_lrbrap.png)

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

![download lottie animation](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626108903/Frame_1-min_vjbc5p.png)

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.

```js
// @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.

```js
// @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:

```js
// @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:

```js
// @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.

```js
// @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.

```js
// @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`).

```js
// @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.

```js
// @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:

```js
// @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;
```

The end result should look like this:

![final app](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626110468/Kapture_2021-07-12_at_18.20.09-min_wkl995.gif)

It was a simple example but I hope you found it useful. 😁
Have a nice day! 😉