How To Add Lottie Animation Files In React

Lottie files are awesome. I consider them a big leap forward in the right direction for animations. If you weren't already aware of it, Lottie files are platform agnostic. This means they cannot only be run on the web, but on smartphone, eBooks, operating systems and more! But in this blog post, I'll focus on how to add Lottie animation files in React. It's not as difficult as it may seem. 😃

You can already have access and play around with the final code in my CodeSandbox example.

Step 1: Install Lottie

You know the drill, buddy! You can install the module using Yarn or npm. Choose your poison. 💉

$ npm i lottie-react #OR
$ yarn add react-lottie

Next, you simply import the library at the top of a React file of your choosing.

import Lottie from 'react-lottie'

Step 2: Choose a Lottie file

Don't have a Lottie file of your own you can try this out on? No problem! There's a vibrant 🍹 community of designers offering plenty of free and beautiful animations. Check them out at LottieFiles. You can even edit the Lottie file before you download it. Ain't that cool?

Now, equipped with your Lottie file, you want to import it into the same React file as the Lottie library.

import DancingBurger from "./dancing-burger.json"

Step 3: Add the Lottie animation

Let's take a look at the bare minimum to run the Lottie animation.

To do so, ☝️ we need to use the <Lottie /> component we imported earlier and pass in our configurations as a props.

<Lottie options={lottieOptions} />

To make the whole thing run, we only need to specify the Lottie file under the property animationData.

const lottieOptions = {
  animationData: DancingBurger
}

That's all folks! 🤷‍♀️

Step 4: Configure the Lottie animation

We could have left it at that, but we're ambitious developers, aren't we? 🤓 Let's go over them.

const lottieOptions = {
  animationData: DancingBurger,
  loop: true, // default: true
  autoplay: true, // default: true
  rendererSettings: {
    preserveAspectRatio: "xMidYMid meet"
  } 
}

Next to our initial animationData setting, we have the autoplay property. It contains a boolean that determines whether the animation runs as soon as it's ready.

loop can either be a boolean or number. In the former case, the animation goes on forever. However, the latter determines how many times it should run.

Last but not least, rendererSettings is a setting for the animation rendering... duh! 😂 There are quite a few options and you can check them out in the documentation. However, most individuals can safely ignore this option if they're not interested.

Step 5: Control the Lottie animation

Many of you will want to control the animation through external triggers such as a button click. Me too! Here's how we do it.

<Lottie
  options={lottieOptions}
  isStopped={true}
  isPaused={false}
/>

There are two props with which we can control the flow 🌊 of the animation, isStopped and isPaused. Both are of type boolean. As their names imply, the former stops and resets the animation, while the latter merely pauses it.

We can try to control these two props by toggling their state with buttons. Let's take a look at the following code snippet.

const [isStopped, setIsStopped] = React.useState(false);
const [isPaused, setIsPaused] = React.useState(false);

return (
  <div className="App">
    <button onClick={() => setIsPaused((prevState) => !prevState)}>
      {isPaused ? "Play" : "Pause"}
    </button>
    <button onClick={() => setIsStopped((prevState) => !prevState)}>
      {isStopped ? "Start" : "Stop"}
    </button>
    <Lottie
      options={lottieOptions}
      isStopped={isStopped}
      isPaused={isPaused} />
  </div>
)

We keep track of each respective states using the useState hook. Depending on the state, we also render different button texts. When clicking on a button, we simply toggle the state by inverting it.

In case you weren't aware of it, in a useState updater function, we can easily retrieve the previous state by passing in a callback function.