In this article, we will step aside a bit of the technical aspect of ReactJS and make the experience of our application better by using a custom animated Lottie. We will try to give a better UI/UX to our application and make the user stick to your application for longer periods.

Why Custom Animations?

Let us say you are building your application and you want to add some animations that you built on your own, inject them on the whole screen or inside child components to make lazy loading look even more attractive.

Lottie Animations

Lottie animations are high-quality JSON encoded animations that you can inject into your web applications and mobile applications whether they are android or iOS, they are supported in all of them.

Getting Started

You can go to LottieFiles and pick one of the free animations that you like the most or JSON encode one of your own to use, which is the case most of the time. For this one, I really liked the following one so we are going to work with it 😋

Configuration

npm i lottie-react

Once you have the package installed, move your downloaded JSON from Lottie files into your project directory.

Consuming Lottie Animation

Now that we are done with the configuration, about time we inject our loader into our code.

// import useLottie hook from package
import { useLottie } from "lottie-react"

// import your json animation inside assets directory
import animation from "./assets/119896-toaster.json";


// use it inside your functional component
function App() {

// set default options for your animations
  const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: animation,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",
    },
  };

  // extract from view by using useLottie hook and passing options as args
  const { View: lottie } = useLottie(defaultOptions);

  // use it as simple as this
  return (
    <div>
      {lottie}
    </div>
 );
}

Moment Of Truth 🪄🪄

Wrap Up

We have covered how to configure Lottie package, get Lottie files, and start using them inside your application within minutes and make your application beautiful, you could also animate and JSON encode the logo of your application and use it as a loader inside all your components 🙀. That would be nice right? I know 😏. Lottie is honestly one of my favorites, what are your thoughts? I’ll see you at the next one. Take care.

👋 Hey, I'm Hasan Shahid

Hi I'm Hasan! I'm a software engineer with decent experience in full stack web development. My tech stack includes JS/TS, React, Native and anything JS. I keep learning and love football.