Adding web animations to your React project using Lottie.
Tags: react, lottie, animations, webdev
Published: 2020-04-25 13:26:37

---
cover_image: https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80
title: Adding web animations to your React project using Lottie.
published: true
description: Adding animations to your site makes it look much more polished and fun to visit. In this post I show how I used Lottie animations and added them to my site.
tags: react, lottie, animations, webdev
---

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](https://lottiefiles.com) and download some. 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j45dqn9c21ic4hw7rpx7.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/swsbv4spuce17mhu6p16.png)

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](https://github.com/chenqingspring/react-lottie)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cvx2kgn76xyyzgargpxi.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0yjfhub679dmtiajeaka.png)

## After

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cfxc3sggunc3y7k6nf7w.png)

### 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!