Adding Lottie animation in React JS

React JSJavascript LibraryFront End Technology

Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Let us learn how to implement Lottie animation in React.js. Lottie animations are mainly used for loader screen or as a start screen. It is written and implemented in JSON format in our React projects.

Example

Go to the official Lottie animation website and download Lottie JSON.

Link to animation the I am going to use −

 https://lottiefiles.com/74546-character-02#/

Name the JSON file "myloader.json" and keep it at the same level as App.js.

Now install the react-lottie package −

npm i --save react-lottie

Lottie library will be used to add lottie-animation’s JSON file to your React site.

Add the following lines of code in App.js

import Lottie from "react-lottie";

// importing lottie animation JSON
// note that you can use any variable in place of "animation"
import animation from './myloader.json'
function App() {
   const defaultOptions = {
      loop: true,
      autoplay: true,
      // here is where we will declare lottie animation
      // "animation" is what we imported before animationData: animation,
      rendererSettings: {
         preserveAspectRatio: "xMidYMid slice",
      },
   };

   return (
      <div>
         <Lottie options={defaultOptions} height={300} width={300} />
      </div>
   );
}

export default App;

Here in defaultOptions, we simply added some animation properties and linked to our Lottie animation JSON. Then we rendered a lottieView with our default options and link to animation.

Output

It will produce the following output −

raja
Published on 28-Sep-2021 11:00:19
Advertisements