Get my new tutorials in your inbox every week

Lottie animations for Web

lottie web animation for React

Lottie by Airbnb has been one of the awesome libraries to integrate motion graphics directly inside mobile apps. This lets designers ship beautiful animations without an engineer painstakingly recreating it by hand and frame by frame. I have been using Lottie for my React Native projects and everyone around me likes it. Did you know that we can integrate the same animations to our Web applications too? This tutorial will walk you through how to get started with Lottie animations for a React web application and a plain vanilla JS web application. Let’s go.

What is Lottie?

Let us hear it from the creators of Lottie,

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

Airbnb

Well, the quote may seem misleading. We do have a library for the web. You can read and explore more about Lottie from its official page. Let’s see an example below,

This is what Lottie can do to your mobile and web applications

What is Lottie Web?

Lottie animations can be run on the web browser using the Lottie HTML player. It is available as an NPM module or as a standalone script. You can check it out from the official Github repo. I will walk you through the details of each one in the sections below.

How does it work?

  • Using BodyMovin plugin you can export your Adobe After Effects animations to a JSON file.
  • This exported JSON data can then be rendered as motion graphic animation inside your web application using the Lottie library which in this case is lottie-web.

Where do I get the animations for Lottie Web?

Well, you can either higher a designer who knows Adobe After Effects or you can download these animations for free from this website called Lottiefiles. For this tutorial, I am using free downloaded files from Lottiefiles.

Why not GIF’s or Videos?

Simple answer – They are too heavy and will make your app download larger payloads over HTTP/HTTPS. Lottie files are JSON and hence lightweight.

Alright, without wasting much time lets get started with our tutorial. Firstly let’s do a Lottie animation for a React Web App, followed by a vanilla JS app.

Lottie web animation for React

Lottie animation demo for ReactJS application

Alright, let’s create an app from scratch and go through the steps

Create a new React project

I am using create-react-app

create-react-app lottie-try

once done, cd into your project directory

cd lottie-try/

Install the lottie-web NPM module.

npm install --save lottie-web

Start your app

npm start 
or
yarn start

Let’s write some code and build our animated app

For this tutorial, I am using this cycling dude from Lottiefiles. Go ahead and download the JSON file and save it in a folder called lottie (you can use any name) under /src.

lottie web animation json

Edit your App.js file (which was created by create-react-app template). Copy-paste the code below,

import React from 'react';
import './App.css';
import lottie from 'lottie-web';
import animationData from './lottie/delivery.json';

let animObj = null;

class App extends React.Component {
  componentDidMount() {
    console.log('componentDidMount');
    
    //call the loadAnimation to start the animation
    animObj = lottie.loadAnimation({
      container: this.animBox, // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: animationData // the path to the animation json
    });
  }
  handleStop = () => {
    animObj.stop();
  }
  handlePlay() {
    animObj.play();
  }
  render() {
    return (
      <div className="App">
        <h2>This is my Lottie Web animation</h2>
        {/* This is you wrapper where animation will load */}
        <div style={{width: 400, margin: '0 auto'}} ref={ ref => this.animBox = ref}></div>
        <button onClick={this.handleStop}>Stop</button>
        <button onClick={this.handlePlay}>Play</button>
      </div>
    );
  }
}

export default App;

The code is pretty simple. We import the lottie module first and then the animation JSON. We define our animation div wrapper inside render() function. And then inside componentDidMount(), we invoke the animation using the loadAnimation() function. The loadAnimation() method accepts the following parameters. All details in the Github repo.

  • animationData: an Object with the exported animation data.
  • path: the relative path to the animation object. (animationData and path are mutually exclusive)
  • loop: true / false / number
  • autoplay: true / false it will start playing as soon as it is ready
  • name: animation name for future reference
  • renderer: ‘svg’ / ‘canvas’ / ‘html’ to set the renderer
  • container: the dom element on which to render the animation

I have also added two buttons to control the animation. There are other useful methods and controls available. You can read from the repo.

<button onClick={this.handleStop}>Stop</button>
<button onClick={this.handlePlay}>Play</button>

Check out a demo here: http://jsphkhan.github.io/lottie-web-demo/

Lottie web animations – Plain vanilla JS app

I will keep this one very short. Basically, we need to load the Lottie web player JS code in our HTML file and then invoke the animation using loadAnimation() method.

<!DOCTYPE html>
<html lang="en">
<head>
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Bodymovin Demo</title>
  <style>
      #bm { 
          width: 400px;
          margin: 0 auto;
      }
  </style>
</head>
<body>
  <!-- Our wrapper -->
  <div id="bm"> </div>
  
  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
  <script>
    var animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'delivery.json'
    })
  </script>
</body>
</html>

A demo can be seen here: http://jsphkhan.github.io/lottie-web-demo/plain-vanilla-demo/

You can play around with the code and give it a try. Let me know about it in the comments section.

If you are into mobile apps and work with React Native, then you might want to read my article on React Native Lottie animations which talks in detail about integrating and running Lottie animations inside a React Native iOS app.

Write a Comment

Your email address will not be published. Required fields are marked *