Blog post

Enhancing Your Next.js Application with Lottie Files: Adding Eye-catching Animations Without Sacrificing Performance

In the dynamic realm of web and mobile development, animations play a crucial role in enhancing user experience and conveying information effectively. However, implementing animations traditionally has often been a complex and time-consuming endeavor, requiring expertise in both design and development. Enter Lottie files, a revolutionary solution that streamlines the integration of high-quality animations into digital projects with remarkable ease. Lottie, developed by Airbnb and now maintained by the open-source community, offers developers a powerful toolset to incorporate vibrant animations seamlessly.

Leveraging the lightweight and versatile JSON-based format, Lottie files encapsulate complex animations created in popular design tools such as Adobe After Effects, allowing them to be rendered natively in web, iOS, and Android applications. This innovative approach bridges the gap between designers and developers, empowering both to collaborate efficiently and bring captivating animations to life across platforms.

How to install with Next.js

So let's get into the crux of it, how to install lottie files with Next.js, we will go through the steps from start to finish and get you started with your first lottie animations.

I would suggest using visual studio code as your coding IDE and also make sure you have the latest version of node installed

Step 1. Install Next.js

Inside Visual Studio code open up your terminal and type the command below to install Next.js

npx create-next-app@latest

The terminal will give you some prompts in order to enable features such as Tailwind CSS and TypeScript. Below are the settings I used for this example.

√ What is your project named? ... lottie-animation
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use "src/" directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No"

Now, let's navigate to the folder where we'll be working. You can do this by either going to 'File' > 'Open Folder' and selecting the project we're working on, or you can use the following commands to navigate to the folder:

cd lottie-animation

Now, let's install the npm packages we need

npm install

Step 2. Install Lottie

You'll need to visit Lottie's website to either download a free Lottie file or purchase a premium one. For this example, I'm using this Lottie file: Download here. (P.S. Don't forget to credit the author if you use a free Lottie file.)

Once you have the file, we will need to:

1. Go to your project's folder structure and create a folder named "json" inside the "src" directory. This is where your Lottie file will reside.
2. Rename the Lottie file to "Lottie-animation-cube.json".

Okay let's get Lottie installed in our application

npm i react-lottie

Now let's get to coding, we only need to change 1 file which will be the page.tsx file to import Lottie and also start our first animation

"use client";

import Lottie from "react-lottie";
import animationData from "@/json/Lottie-animation-cube.json";
          
export default function Home() {
          
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <Lottie options={defaultOptions} height={400} width={400} />
    </main>
  );
}

Step 3. Let's run the application

If all went well we can now run the command to start the server

npm run dev

Success you have now implimented your first Lottie animation! for more properties please visit the NPM documentation location here