DEV Community

Cover image for Lottie animated illustrations for React
Ahmed Alaa
Ahmed Alaa

Posted on • Updated on

Lottie animated illustrations for React

As we know one of the most web design trends used are illustrations, Illustrations have been in digital product design for a long time. Illustrations as very popular design elements add natural feel and human touch to overall UX of our products.

So what if we could use illustrations with animation, We might bring our products to the life and make them stand out— adding extra details and personality.

In this article am going to show you how to use lottie animated illustrations at your react application by only 3 steps!, so let's start

animated lottie

What is a Lottie?

A Lottie is a high-quality JSON encoded animation compatible with Android, iOS, web browsers, React, and more. If you want to learn more about what a Lottie, Let us hear it from the creators of Lottie.

Alright, let’s create an app from scratch and bring it to life by adding animated illustrations.

Step 1

npx create-react-app lottie-animations

Step 2 : install react-lottie library

npm install --save react-lottie

Step 3 : let's choose our animation from LottieFiles

Lottie

After you select your lottie animation,download it as a json or use the Lottie Animation URL.

  • For me the way i prefer to download json files, Open you project src file and create a new animation folder then paste on it the lotti animation you have downloaded.

  • Then let's create a new component that we will use it as a reuseable component for lotti animations Lottie.js

Here is how is our structure should look like :

src folder

Open your project with your terminal : src > Lottie.js
and here is how your component should look like

import React from "react";
import Lottie from "react-lottie";

export default function LottieAnimation({ lotti, width, height }) {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: lotti,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div>
      <Lottie options={defaultOptions} height={height} width={width} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

First thing we did here we import lottie library,then we have a defaultOptions variable that contains the settings we need for our animation

as you notice the third key of our object is animationData and it is the lottie that we need to use and render, so i receive it as a props, Width and height too will receiveing them as a props.

Now let's import this lottie component to our App.js file and see magic!

Open your App.js

  • Remove it's content and logo code.
  • Import lottie component you have just created.
  • Import the lotti json file from animations folder we have just created.
import LottieAnimation from "./Lottie";
import home from "./animation/home.json";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div>
          <LottieAnimation lotti={home} height={500} width={500} />
        </div>
      </header>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Open your terminal and serve your app using
npm start

Congrats you should see now the animated illustrations moving on your screen 😄

Here is the live demo : demo

Github repo : ahmedelhegery

Recap

  • We created React App using create-react-app
    then we installed lottie-react as a dev-dependency.

  • We choose our lottie animation, download it as json then add it to our app.

  • We made a reuseable component to use it anywhere of our app.

if you have any questions, please don't hesitate to ask.
Always happy to hear from you 🙂

Top comments (7)

Collapse
 
dcsan profile image
dc

This looks great for using pre-existing animation files but what you recommend for creating quick animations or banner ads? I don't want to buy after effects just to do a few h5 animations here and there

Collapse
 
reallynattu profile image
Nattu 🇲🇻

@dc you could either
Synfig
youtube.com/watch?v=Wjw2nO8kYlc

Create with Flow
createwithflow.com/

Haiku Animator
haikuanimator.com/

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

3a4 ya handasa ♥

Collapse
 
ahmedelhegery profile image
Ahmed Alaa

taslm ya kber ♥

Collapse
 
afozbek profile image
Abdullah Furkan Özbek

Thanks for sharing it, the animations are great. There are even community contents we can use. I appreciate it.

Collapse
 
hebasaadosman profile image
hebasaadosman

Thanks very much :)

Collapse
 
moatazkhaled93 profile image
Moataz khaled

Great