Create animations using Lottie in Next JS

Hey Everyone,

Hope you all doing great.

In this post we will be creating some animations using Lottie in Next JS.

What is a Lottie?
A Lottie is a high-quality JSON encoded animation compatible with Android, iOS, web browsers, React, and more. You can learn more about what a Lottie is here.

Now let's start by creating our next-app,

npx create-next-app nextjs-lottie-animation

Then we need to install the package react-lottie like below:

npm install --save react-lottie

Next step would be to include the Lottie JSON file(animation) that we want to render on our site into our Next JS project. We can choose from a wide range of animations here. So lets add the file(e.g. mexican-fella.json) into our newly created project in the public folder.

The final step would be to add the Lottie component wherever we want to render it like below:

import Lottie from "react-lottie"
import animationData from '../public/mexican-fella.json'
export default function Home() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };
  return (
    <div>
       <Lottie options={defaultOptions} height={400} width={400} />
    </div>
  )
}

props

The <Lottie /> Component supports the following:

options required

the object representing the animation settings that will be instantiated by bodymovin. Currently a subset of the bodymovin options are supported:

loop options [default: false]

autoplay options [default: false]

animationData required

rendererSettings required

width optional [default: 100%]

pixel value for containers width.

height optional [default: 100%]

pixel value for containers height.

More information on how to use this package can be found here.

That's it. We are all set to go. Start the app in development mode using the command:

npm run dev

And we are done! Voilaaaa!!!

Thanks For Reading and Supporting.