Add Lottie Animation to Your Project

Playing an exported Lottie file with the Lottie players on the web and in apps.

Lottie Players Overview

In this article, we focus on what the Lottie animation file format is and describe some of the Lottie players that allow Lottie animations to play across different platforms and frameworks.

---

What Is Lottie?

Lottie is a vector animation format designed for lightweight and scalable animations. It uses JSON to represent animation data and was created by Airbnb in 2017.

At its core, a Lottie animation is:

• A JSON file
• Describes animation data such as shapes, paths, colors, transforms, and timing
• Resolution-independent, so it scales without losing quality

---

What Are Lottie Players?

A Lottie file is only data. By itself, it does nothing.

A Lottie player is the runtime that:

• Reads the Lottie JSON file
• Interprets the animation instructions
• Renders the animation using SVG, Canvas, or native drawing APIs (iOS / Android)

Because Lottie animations are based on animation data rather than video files, they are lightweight and suitable for web and app interfaces.

---

Lottie Players

There are several Lottie players available, created by different companies and open-source communities. They parse and render Lottie animations:

• lottie-web
• lottie-ios
• lottie-android
• dotlottie-react
• dotlottie-react-native
• dotlottie-vue
• dotlottie-ios
• dotlottie-android

Different platforms require different rendering approaches, which is why multiple Lottie players exist.

---

In This Section

In this section, we focus on:

• practical integration of Lottie animation,
• how to add commonly used Lottie players to your project,
• adding Lottie to different platforms and frameworks,
• how to edit added animations so that hot reloading picks up changes instantly.

---

Web

You can add Lottie animations to a plain web project (HTML, CSS, JavaScript) using the lottie-web or @lottiefiles/dotlottie-web packages.

To add a Lottie animation to a web project:

• Create a web project
• Install a Lottie player for the web
• Add your Lottie animation to the project
• Create a Lottie script
• Use it in an HTML page
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create Web Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new vanilla web project called my-animation-app:

npm create vite@latest my-animation-app -- --template vanilla

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Install Lottie for Web

Install the lottie-web or @lottiefiles/dotlottie-web Lottie player.

Option 1: If you want to use lottie-web, in your web project folder, run:

npm install lottie-web

Option 2: If you want to use dotlottie-web, in your web project folder, run:

npm install @lottiefiles/dotlottie-web

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Create an animations folder in src/assets and add your animation:

src/assets/animations/animation.json

---

Create Lottie Script

How you set up Lottie in a web project depends on which player you are using to play the animation.

Option 1: If you are using lottie-web, src/main.js should look like this:

import lottie from "lottie-web";
import animationData from "./assets/animations/animation.json";

const container = document.getElementById('lottie-animation');

if (container) {
  lottie.loadAnimation({
    container: container,
    renderer: 'svg',  // 'svg', 'canvas', or 'html'
    loop: true,
    autoplay: true,
    animationData: animationData
  });
}

Option 2: If you are using dotlottie-web, src/main.js should look like this:

import { DotLottie } from '@lottiefiles/dotlottie-web';
import animationData from "./assets/animations/animation.json";

const canvas = document.getElementById('dotlottie-canvas');

if (canvas) {
  new DotLottie({
    autoplay: true,
    loop: true,
    canvas,
    data: animationData
  });
}

---

Use in HTML Page

How your HTML markup looks depends on which player you are using.

Option 1: If you are using lottie-web, index.html should look like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lottie Animation in Web</title>
    <style>
      #lottie-animation {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>My Lottie Animation</h1>
      <div id="lottie-animation"></div>
      <!-- ... the rest of your code -->
    </main>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Option 2: If you are using dotlottie-web, index.html should look like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lottie Animation in Web</title>
    <style>
      .animation-container {
        width: 300px;
        height: 300px;
      }

      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>My Lottie Animation</h1>
      <div class="animation-container">
        <canvas id="dotlottie-canvas"></canvas>
      </div>
      <!-- ... the rest of your code -->
    </main>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:5173 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 5173 has been taken by another application.

Your Lottie animation should now work in your web project.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your src/assets/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

React

You can add Lottie animations to a React app using the lottie-react or @lottiefiles/dotlottie-react packages.

These are React-specific Lottie players that adapt animations to React components, allow control via props, and integrate smoothly with the React lifecycle.

To add a Lottie animation to a React project:

• Create a React project
• Install a Lottie player for React
• Add your Lottie animation to the project
• Use Lottie in a React component
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create React Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new React + TypeScript project called my-animation-app:

npm create vite@latest my-animation-app -- --template react-ts

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Install Lottie for React

Option 1: If you are using lottie-react, in your React project folder, run:

npm install lottie-react

Option 2: If you are using @lottiefiles/dotlottie-react, in your React project folder, run:

npm install @lottiefiles/dotlottie-react

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Create an animations folder in src/assets/ and add your animation:

src/assets/animations/animation.json

---

Use Lottie in React Component

How you use Lottie in React depends on which player you are using to play the animation.

Option 1: If you are using lottie-react, src/App.tsx should look like this:

import Lottie from "lottie-react";
import animationData from "./assets/animations/animation.json";


function App() {
    return (
        <div>
            <Lottie
                animationData={animationData}
                loop={true}
                autoplay={true}
                style={{ width: 300, height: 300 }}
            />
            {/* ... the rest of your code */}
        </div>
    );
}

export default App;

Option 2: If you are using @lottiefiles/dotlottie-react, src/App.tsx should look like this:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import animationData from './assets/animations/animation.json';

function App() {
  return (
    <div>
        <DotLottieReact
            data={animationData}
            loop
            autoplay
        />
        {/* ... the rest of your code */}
    </div>
  );
};

export default App;

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:5173 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 5173 has been taken by another application.

Your Lottie animation should now work in your React project.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your src/assets/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

Next.js

You can add Lottie animations to a Next.js app using the lottie-react or @lottiefiles/dotlottie-react packages.

To add a Lottie animation to a Next.js project:

• Create a Next.js project
• Install a Lottie player for React
• Add your Lottie animation to the project
• Create a Lottie component
• Use the component on the page
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create Next.js Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new Next.js project with TypeScript called my-animation-app:

npx create-next-app@latest my-animation-app --typescript

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Install Lottie for Next.js

Install the lottie-react or @lottiefiles/dotlottie-react Lottie player.

Option 1: If you want to use lottie-react, in your Next.js project folder, run:

npm install lottie-react

Option 2: If you want to use @lottiefiles/dotlottie-react, in your Next.js project folder, run:

npm install @lottiefiles/dotlottie-react

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Create an animations folder and add your animation:

app/animations/animation.json

---

Create Lottie Component

How you use Lottie in Next.js depends on which player you are using, but all components require use client since Lottie needs browser APIs.

Option 1: If you are using lottie-react, app/components/LottieAnimation.tsx should look like this:

"use client";

import Lottie from "lottie-react";
import animationData from "../animations/animation.json";

export default function LottieAnimation() {
    return (
        <div>
            <Lottie
                animationData={animationData}
                loop
                autoplay
                style={{ width: 300, height: 300 }}
            />
            {/* ... the rest of your code */}
        </div>
    );
}

Option 2: If you are using @lottiefiles/dotlottie-react, app/components/LottieAnimation.tsx should look like this:

"use client";

import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import animationData from "../animations/animation.json";

export default function LottieAnimation() {
    return (
        <div>
            <DotLottieReact
                data={animationData}
                loop
                autoplay
            />
            {/* ... the rest of your code */}
        </div>
    );
}

---

Use in Your Page

app/page.tsx

import LottieAnimation from "./components/LottieAnimation";

export default function Home() {
    return (
        <div>
            <LottieAnimation />
            {/* ... the rest of your code */}
        </div>
    );
}

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:3000 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 3000 has been taken by another application.

Your Lottie animation should now work in your Next.js project.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your app/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

Astro

You can add Lottie animations to your Astro project using the lottie-web or @lottiefiles/dotlottie-web packages.

To add a Lottie animation to an Astro project:

• Create an Astro project
• Install a Lottie player for the web
• Add your Lottie animation to the project
• Create a Lottie component
• Use it in an Astro page
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create Astro Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new Astro project:

npm create astro@latest my-animation-app

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Install Lottie for Web

Install the lottie-web or @lottiefiles/dotlottie-web Lottie player.

Option 1: If you want to use lottie-web, in your Astro project folder, run:

npm install lottie-web

Option 2: If you want to use dotlottie-web, in your Astro project folder, run:

npm install @lottiefiles/dotlottie-web

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Create an animations folder in src/assets and add your animation:

src/assets/animations/animation.json

---

Create Lottie Component

How you use Lottie in Astro depends on which player you are using to play the animation.

Option 1: If you are using lottie-web, src/components/LottieAnimation.astro should look like this:

<div id="lottie-animation"></div>


<script>
import lottie from "lottie-web";
import animationData from "../assets/animations/animation.json";

const container = document.getElementById('lottie-animation');

if (container) {
    lottie.loadAnimation({
      container: container,
      renderer: 'svg',  // 'svg', 'canvas', or 'html'
      loop: true,
      autoplay: true,
      animationData: animationData
    });
  }
</script>

<style>
  #lottie-animation {
    width: 300px;
    height: 300px;
  }
</style>

Option 2: If you are using dotlottie-web, src/components/LottieAnimation.astro should look like this:

src/components/LottieAnimation.astro

<div class="animation-container">
  <canvas id="dotlottie-canvas"></canvas>
</div>

<script>
  import { DotLottie } from '@lottiefiles/dotlottie-web';
  import animationData from "../assets/animations/animation.json";

  const canvas = document.getElementById('dotlottie-canvas') as HTMLCanvasElement;

  if (canvas) {
    new DotLottie({
      autoplay: true,
      loop: true,
      canvas,
      data: animationData
    });
  }
</script>

<style>
  .animation-container {
    width: 300px;
    height: 300px;
  }

  canvas {
    width: 100%;
    height: 100%;
  }
</style>

---

Use in Astro Page

src/pages/index.astro

---
import LottieAnimation from '../components/LottieAnimation.astro';
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Lottie Animation in Astro</title>
    </head>
    <body>
        <main>
            <h1>My Lottie Animation</h1>
            <LottieAnimation />
            {/* ... the rest of your code */}
        </main>
    </body>
</html>

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:4321 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 4321 has been taken by another application.

Your Lottie animation should now work in your Astro project.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your src/assets/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

Vue

You can add Lottie animations to a Vue app using the @lottiefiles/dotlottie-vue package.

To add a Lottie animation to a Vue project:

• Create a Vue project
• Install the Lottie player for Vue
• Add your Lottie animation to the project
• Create a Lottie component
• Use Lottie in a Vue component
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create Vue Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new Vue 3 project with TypeScript:

npm create vue@latest my-animation-app

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Install Lottie for Vue

npm install @lottiefiles/dotlottie-vue

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Create an animations folder in public and add your animation:

public/animations/animation.json

---

Create Lottie Component

src/components/LottieAnimation.vue

<template>
    <div class="lottie-container">
        <DotLottieVue
            src="/animations/animation.json"
            :loop="true"
            :autoplay="true"
            style="height: 300px; width: 300px;"
        />
    </div>
</template>

<script setup lang="ts">
import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
</script>

<style scoped>
.lottie-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

---

Use Lottie in Vue Component

src/App.vue

<template>
    <div id="app">
        <h1>My Lottie Animation</h1>
        <LottieAnimation />
    </div>
     <!-- ... the rest of your code -->
</template>

<script setup>
import LottieAnimation from './components/LottieAnimation.vue';
// ... the rest of your imports
</script>

<style scoped>
#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* ... the rest of your style */
</style>

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:5173 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 5173 has been taken by another application.

Your Lottie animation should now work in your Vue project.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your public/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

Nuxt

You can add Lottie animations to a Nuxt app using:

• the nuxt-lottie module
• the @lottiefiles/dotlottie-vue package

---

Option 1: Using the Nuxt Lottie Module

The Lottie module can be added to a Nuxt project as it is listed in the Nuxt Modules directory.

To add a Lottie animation to a Nuxt app:

• Create a Nuxt project
• Add Nuxt Lottie module
• Add your Lottie animation
• Use Lottie in a Nuxt app
• Run your app
• Edit the animation in the project folder
• Done! The animation is ready

---

Create Nuxt Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new Nuxt project with TypeScript:

npx nuxi@latest init my-animation-app

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Add Nuxt Lottie module

npx nuxi module add lottie

After installation, ensure that the assets/lottie folder exists. The module should automatically create it for you.

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Add your animation to the assets/lottie folder.

assets/lottie/animation.json

---

Use Lottie in Nuxt App

app.vue

<template>
    <div>
        <Lottie name="animation" width="300px" height="300px" />
        <!-- ... the rest of your code -->
    </div>
</template>

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:3000 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 3000 has been taken by another application.

Your Lottie animation should now work in your Nuxt app.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your assets/lottie folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

---

Option 2: Using the @lottiefiles/dotlottie-vue Package

You can add Lottie animations to a Nuxt app using the @lottiefiles/dotlottie-vue package.

To add a Lottie animation to a Nuxt app:

• Create a Nuxt project
• Install the Lottie player for Vue
• Add your Lottie animation to the project
• Create a Lottie component
• Use Lottie in a Nuxt app
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create Nuxt Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new Nuxt project with TypeScript:

npx nuxi@latest init my-animation-app

Go into your project folder:

cd my-animation-app

Then install dependencies:

npm install

---

Install Lottie for Vue

npm install @lottiefiles/dotlottie-vue

---

Add Your Lottie Animation

To add a Lottie animation to your project, you can:

• Create an animation from scratch in Pixodesk Animator, or
• Download an animation from LottieFiles and edit it in Animator.

Create an animations folder in public and add your animation:

public/animations/animation.json

---

Create Lottie Component

In the same directory as app.vue file, create a components folder and add LottieAnimation.vue to it.

components/LottieAnimation.vue

<template>
    <div class="lottie-container">
        <DotLottieVue
            src="/animations/animation.json"
            :loop="true"
            :autoplay="true"
            style="height: 300px; width: 300px;"
        />
    </div>
</template>

<script setup lang="ts">
import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
</script>

<style scoped>
.lottie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
</style>

---

Use Lottie in Nuxt App

app.vue

<template>
    <div>
        <div class="animation">
            <LottieAnimation />
        </div>
        <!-- ... the rest of your code -->
    </div>
</template>


<style scoped>
.animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* ... the rest of your style */
</style>

---

Run Your App

Start the development server:

npm run dev

You should see Local: http://localhost:3000 in your terminal.

Open the link in your browser.

Note: The localhost port can be different if 3000 has been taken by another application.

Your Lottie animation should now work in your Nuxt app.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your public/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the browser immediately. Refresh the page if necessary.

React Native

You can add Lottie animations to a React Native Expo project using the lottie-react-native and @lottiefiles/dotlottie-react packages. Expo apps work on the web and on both iOS and Android.

To add a Lottie animation to a React Native Expo project:

• Create a React Native project
• Install the Lottie player for Expo
• Add your Lottie animation to the project
• Use Lottie in a React Native component
• Run your app
• Edit the animation in the project folder (transform, colors, shapes, etc.)
• Done! The animation is ready

---

Create React Native Expo Project

Open your terminal and navigate to your projects folder:

cd path/to/your/projects

Create a new Expo project:

npx create-expo-app@latest my-animation-app

Now go into your project folder:

cd my-animation-app

Install dependencies:

npm install

---

Install Lottie for Expo

npx expo install lottie-react-native @lottiefiles/dotlottie-react

Note: Use npx expo install instead of npm install to ensure compatibility with your Expo SDK version.

---

Get Your Lottie Animation

Create an animation in Animator

• https://pixodesk.com/animator Tool

Download from LottieFiles

• https://lottiefiles.com

Create an animations folder in assets and add your animation:

assets/animations/animation.json

---

Use Lottie in React Native Component

app/(tabs)/index.tsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';


export default function App() {
  return (
    <View style={styles.container}>
      <LottieView
        source={require("../../assets/animations/animation.json")}
        autoPlay
        loop
        style={styles.animation}
      />
      {/* ... the rest of your code */}
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  animation: {
    width: 300,
    height: 300,
  },
  // ... the rest of your style
});

---

Run Your App

Start the development server:

npx expo start

You should see something like:

- Metro waiting on exp://192.168.1.5:8081
- Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

Download the Expo Go app on your mobile device (iOS or Android) and scan the QR code to view your animation.

Your Lottie animation should now work in your Expo app on the web and on both iOS and Android.

---

Edit Animation in the Project Folder

• Open your animation in Animator directly from your assets/animations folder.
• Modify your file and save it.

---

Done! Animation is Ready 🎉

Hot reloading will pick up changes and reflect them in the app immediately. Refresh the page if necessary.