DEV Community

Cover image for Lottie Animations for React
CiaraMaria
CiaraMaria

Posted on • Updated on

Lottie Animations for React

Who doesn't love animations? They're fun, engaging, and versatile. In this post, I will introduce Lottie animations and how to implement them into your React website.

What is a Lottie?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform. They are small files that work on any device and can scale up or down without pixelation.

Integrating Lottie into React App

Step 1: install the library

npm install --save react-lottie

Step 2: select an animation from LottieFiles

You can download it as a JSON or use the Lottie Animation URL.
Personally, I prefer to download and store it in a folder in my application.
Here's an example of the file structure:

Step 3: create a Lottie.js file in src

The code inside that file should look like this:

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
Step 4: import your Lottie into the component you want to return the animation:
import React from 'react';
import LottieAnimation from '../Lottie';
import home from '../Animation/dev.json';

const Example = () => {

    return ( 
         <div className='example'> 
           <LottieAnimation lotti={home} height={300} width={300} />
        </div>
    )
}

export default Example; 
Enter fullscreen mode Exit fullscreen mode

Note: This example implies that you then add <Example /> into render in App.js


That's it! Your beautiful Lottie animation should now render to your site!

As always, feedback and discussion is welcome. 💁

Top comments (11)

Collapse
 
0916dhkim profile image
Danny Kim

I've never heard of Lottie before, and it looks promising. To my understanding, Lottie is to GIF as SVG is to JPG.

Collapse
 
devhammed profile image
Hammed Oyedele • Edited

Exactly but it gives you more than what this post discussed.

You can play, pause, forward, backward the animations just like videos.

Collapse
 
jameshubert_com profile image
James Hubert

Excellent. This is right up my alley. Thanks for posting.

Collapse
 
mariaverse profile image
CiaraMaria

Excite!

Collapse
 
jameshubert_com profile image
James Hubert

I ended up using this for an ecommerce frontend I'm building for a client's site!
dev.to/jwhubert91/project-31-of-10...

Thread Thread
 
mariaverse profile image
CiaraMaria

Yay! I love hearing that you were able to implement this! Thank you for the update.

Collapse
 
husseinkizz profile image
Hussein Kizz

I was struggling through a lot of docs and this wasn't there, thanks so much I finally added lottie to my portfolio following your post!

Collapse
 
mariaverse profile image
CiaraMaria

That's awesome! Thank you!

Collapse
 
teysworld profile image
Teysworld

This is awesome! I am new to React and loving these new discoveries

Collapse
 
akshay1027 profile image
Akshay.R.R • Edited

is there any ways to play with interactivity of Lottie files in react? @proiacm . Please let me know if you have any solution for this, Thank you!

Collapse
 
smilegupta profile image
Smile Gupta

How to adjust the margin in react-Lottie?