Complex animation react-lottie

Handle complex animation with react-lottie

react

09-April-2020

What's app folks.

Today I bring you lottie animation for web and via react-lottie which from airbnb you could handle complex animation.

This is a beginner guide to get the basics.

First we need to install our package:

yarn add -D react-lottie

Second: We have to choice animation file and the best place is Lottiefiles. If you go there you have to make account and open anyone and download it as json file.

Remember copyrights, better to download the free one

Three: usage could be done by adding this json file to your app.

I'm using new create-react-app in App.js we will import react-lottie and import json file that we have just downloaded.

App.js

import React, { useState } from "react";
import Lottie from "react-lottie";
import * as animationData from "./utils/animation.json";

function App(props) {
  const [isStopped, setIsStopped] = useState(false);
  const [isPaused, setIsPaused] = useState(false);

  const options = {
    loop: true, // optional
    autoplay: true, // optional
    animationData, // required
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice", // required
    },
  };

  return (
    <div className="container">
      <Lottie
        options={options}
        width={400}
        height={400}
        isStopped={isStopped}
        isPaused={isPaused}
      />
      <button onClick={() => setIsStopped(true)}>Stop</button>
      <button onClick={() => setIsStopped(false)}>Play</button>
      <button onClick={() => setIsPaused(!isPaused)}>Pause</button>
    </div>
  );
}

export default App;

Now start the sever or restart it.

and here we are: react-lottie car

With basic knowledge about design you could go far further.


This article have been explained also on Youtube. Don't forget to subscribe to get the new blogs.

Links:

Sources:


Published on CodeReview by Mustafa Alroomi on 09-April-2020