Tutorial
How To Add Animations to React Apps with React-Lottie
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Introduction
Adobe After Effects can be an intuitive way to generate web animations, but there has historically been problems converting these animations to web apps. It is usually necessary to use a third party program to import an animation from After Effects.
One such program is Lottie, a program developed by Airbnb Design that allows you to use these animations in real time in a lightweight and flexible format. Lottie takes JSON data from an After Effects extension called Bodymovin and turns it into a usable animation for the web.
In this article, we’ll be looking at how to use Lottie to add animations to our React applications. To do this, we’ll be using an npm package called react-lottie to generate viewable animations from JSON files exported by Bodymovin. Since we’ll be focusing on the app side of things, we won’t look into how these animations are created in After Effects, but rather use animations created and open sourced by designers on Lottiefiles. If you have animations on After effects that you would like to use, you can export them to JSON using the Bodymovin plugin for After Effects.
For this tutorial, we’ll build a React application that consists of two types of Lotties, one regular one and another with controlled animations depending on certain values in state.
If you’d like to look at the finalized code, take a look at this CodeSandbox example.
Step 1 — Creating Our Application
We’ll be using create-react-app
to create our app. If you don’t have it installed yet, run the following command to do so:
- npm install --g create-react-app
Now let’s create our application:
- create-react-app lottie-demo
This will create some boilerplate code for our app and configure our React development environment. Open up the lottie-demo
directory and let’s get coding. Yarn is create-react-app’s default package manager, and it’s what we’ll use to handle our dependencies.
Now let’s install our one and only dependency, react-lottie
. To do this run this command in the terminal:
- yarn add react-lottie
Now let’s add our animations.
Step 2 — Getting our Sample Lotties
We’ll be getting our sample animations from LottieFiles, so head over there and create a free account.
LottieFiles gives you access to a curated library of animations from designers all over the globe. It also provides a platform to test, upload, and share your own animations.
Browse through the animations, tweak the settings if necessary, and when you are happy with what you have click Download JSON
to get the animation. Inside the src
directory of our application, create two more directories, components
and lotties
. These will hold or React components and Lottie animation data respectively. Place the downloaded JSON files inside the lotties
directory.
Now we are ready to create components that display these animations.
Step 3 — Creating Uncontrolled Lotties
Animations can be allowed to run freely or be manipulated by data in state. First, let’s look at the first case and create an animation that imports and renders a lottie.
Create a file called UncontrolledLottie.jsx
inside the components
directory and place the following code inside it:
// UncontrolledLottie.jsx
import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from '../lotties/4203-take-a-selfie.json'
class UncontrolledLottie extends Component {
render(){
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return(
<div>
<h1>Lottie</h1>
<p>Base animation free from external manipulation</p>
<Lottie options={defaultOptions}
height={400}
width={400}
/>
</div>
)
}
}
export default UncontrolledLottie
In this case, 4204-take-a-selfie.json
is the JSON file of the lottie downloaded. Feel free to replace that with whichever you had downloaded.
Now let’s go through the information provided in the configuration. You will notice we pass an options
prop to the Lottie
component; this contains the configuration data for the animation to be rendered. This consists of:
animationData
- an Object with the exported animation data, in our case, the json fileautoplay
- a boolean determining if it will start playing as soon as it is readyloop
- a boolean or number that determines if the animation will repeat or how many times it should repeatrendererSettings
- configuration data for the renderer
These are just some of the options you can provide.
We also provide the dimensions (length and width) of our animation as props to Lottie
.
This animation is now ready for use by importing it into our App.js
. This will look like the following:
But first let’s add our controlled Lottie.
Step 4 — Creating Controlled Lotties
Lotties can be manipulated in React to change some of their properties using data in state. In our case, we’ll look at how we can play, stop, and pause the animations in our lottie.
Let’s create a file in components
and name it ControlledLottie.jsx
. Place the following code in that file:
// ControlledLottie.jsx
import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from '../lotties/77-im-thirsty.json'
class ControlledLottie extends Component {
state = {isStopped: false, isPaused: false}
render(){
const buttonStyle = {
display: 'inline-block',
margin: '10px auto',
marginRight: '10px',
border: 'none',
color: 'white',
backgroundColor: '#647DFF',
borderRadius: '2px',
fontSize: '15px'
};
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return(
<div className="controlled">
<h1>Controlled Lottie</h1>
<p>Uses state manipulation to start, stop and pause animations</p>
<Lottie options={defaultOptions}
height={400}
width={400}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}
/>
<button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>Stop</button>
<button style={buttonStyle} onClick={() => this.setState({isStopped: false, isPaused: false })}>Play</button>
<button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>Pause</button>
</div>
)
}
}
export default ControlledLottie
Let’s analyze this code. There are a few key differences between this and ControlledLottie.jsx
. We’ve added three buttons at the bottom along with their styling. These buttons are used to toggle the values of the data in state.
The Lottie
component also has two more props:
isStopped
- a boolean indicating whether the animation is active or notisPaused
- a boolean that indicates if the animation is paused or not
Here’s what our controlled lottie component will look like:
Both our animations are ready to use now, so let’s import them into App.js
and display them in our app.
Edit the code in App.js
, importing our components and adding them inside the render function:
// App.js
import React, { Component } from 'react';
import './App.css';
import UncontrolledLottie from './components/UncontrolledLottie';
import ControlledLottie from './components/ControlledLottie';
class App extends Component {
render() {
return (
<div className="App">
<h1>REACT LOTTIES</h1>
<div className="lotties">
<UncontrolledLottie />
<ControlledLottie />
</div>
</div>
);
}
}
export default App;
Let’s style our app to make it mobile responsive. We can do this using CSS grid. Add the following code to your App.css
file.
.lotties{
display: grid;
grid-template-columns: auto auto;
}
@media only screen and (min-device-width : 320px) and (max-device-width: 480px){
.lotties{
display: grid;
grid-template-columns: auto;
}
}
This places our lotties in two columns that will be reduced to a single column on devices with a smaller width.
Now fire up the application:
- yarn start
Your browser will open up and you will be able to see the two animations active. Clicking Pause
will have the controlled animation freeze in its current frame. Clicking it again will resume it as well as clicking Play
. Clicking Stop
returns the animation to its default position and holds it there.
Conclusion
Lottie
can be used as a lightweight method to add animations to your web app. It can be used to make applications more interactive and provide visually appealing feedback, like animations indicating the state of certain processes. Lotties are performant, and will not put a heavy load on your application.