Adding animations to your React project using Lottie.

Adding animations to your React project using Lottie.

Β·

4 min read

I'm going to be honest, between my day job and my family there is very little time left for me to be building my side projects. That means I have mainly been focusing on functionality, and not so much on the aesthetics of my sites. One of those things that are purely cosmetic has been animations. They make the sites more polished and bring a lot of character to the product.

The problem for me is that I just don't have the patience (time) to animate SVGs or orchestrate transforms and translations.

So when I found the method I'm about to describe it almost felt too good to be true, because with minor time spend I could add animations to my sites without much effort. This is where Lottie animations to the rescue!

Lottie Animations

Without writing too much about it, Adobe After Effects is a very popular program for creating animations. Airbnb has made a piece of software called Lottie that lets us display these animations in real-time on the web (mobile also). It takes JSON data from an After effects plugin called Bodymovin and uses that data to deliver those sweet moving things to our apps.

Using Lottie with React.js

Step 1 - Init new react app

For the sake of it let's create a new project with:

npx create-react-app lottie-example

This makes us the old trusty React boilerplate project, and now let's install the only package that we need to make this happen:

yarn add react-lottie

Step 2 - Get animations from LottieFiles

Some really awesome people like to make animations in their free time and share them for free. So head over to LottieFiles and download some.

(You'll need to create a free account in order to download them)

Alt Text

There are many free high-quality animations to pick from, and there's a marketplace where people sell more elaborate animations or polished files.

I'm just grabbing one from the popular section for the sake of this tutorial:

Alt Text

There's an option to tweak the settings of the animations right there in the browser, and when you are happy with what you have, click Download JSON to download the animation to your local machine.

Place the animation inside your React Project and we are ready to go.

Step 3 - Add the Lottie animation

So let's fire up our dev server and add some code

yarn run start

In the spirit of right now, I made a new file called CoronaVirus.js with the following contents.

import React from "react";
import Lottie from "react-lottie";
import animationData from "./18795-coronavirus.json";

function CoronaVirus() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return <Lottie options={defaultOptions} height={400} width={400} />;
}

export default CoronaVirus;

Let's go through some key things:

  • animationData - Object containing our animation data from the JSON file.
  • autoplay - Set's of the animation should start playing as soon as it's ready.
  • loop - Shall it loop? Probably, but you can set a number of times it should loop also.
  • rendererSettings - configuration data for the renderer.

There are more options, please look at the docs for a better description: React Lottie Docs

After that, I simply insert our awesome component into App.js

import React from "react";
import CoronaVirus from "./CoronaVirus";

function App() {
  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Lottie Example</h1>
      <CoronaVirus />
    </div>
  );
}

export default App;

Results

Alt Text

Pretty neat! I use these animations everywhere, from loading screens to empty states, for that little bit of extra flair.

I went ahead and added it to my own personal homepage and really like the results.

Before

Alt Text

After

Alt Text

Finally

There are more things you can do with these animations, you can for instance make them controlled. This means you can start and stop the animation at will, pause it, speed them up, etc.

I will leave things like this though, I hope I could help some people.

Thanks for reading!

Like and subscribe if this helped you out and you want to receive more articles like this when they are published.

Did you find this article valuable?

Support Carl-W by becoming a sponsor. Any amount is appreciated!

Β