Lottie Animations for React

Lottie Animations for React:


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 (
); };
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';

const Example = () => {

    return ( 
) } export default Example;
Enter fullscreen mode Exit fullscreen mode

Note: This example implies that you then add  into render in App.js

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

from Tumblr https://generouspiratequeen.tumblr.com/post/634294291885441024

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s