Adding web animations to your React project using Lottie.

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 way more polished and brings 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. Here comes Lottie animations to the rescue!

Lottie Animations

Without writing too much about it, Adobe After effects is a very popular program to make animations in. AirBnB have 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

There are some really awesome people who likes to make animations on their free time and share them for free. So head on over to LottieFiles and download some.

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

There's so many free high quality animations to pick from, and there's a marketplace where people sell more elaborate animations.

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

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 local.

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

Step 3 - Add 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 an amount 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 simple 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

Pretty neat! I just immediately want to use it everywhere.

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

Before

After

Finally

There's more things you can do with these animations, you can for instance make them controlled. Which 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!