DEV Community

loading...
Cover image for Add animations to your React App using Lottie

Add animations to your React App using Lottie

Francisco Mendes
I don't know about you but I'm just getting started. 🍩
・4 min read

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
Enter fullscreen mode Exit fullscreen mode

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

lottie free animations

For this example I chose this animation:

duck thumbs up lottie animation

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

download lottie animation

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

The end result should look like this:

final app

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

Discussion (2)

Collapse
king11 profile image
Lakshya Singh

so lottie-web can work in any of the framework ?

Collapse
franciscomendes10866 profile image
Francisco Mendes Author

Yes, you can use it with other frameworks. But you have wappers if you want to implement lottie animations in your projects. I just happen to like lottie-web.