How to Add Lottie Animation to React

Lottie animations make React websites more interactive with lightweight, scalable animations. Instead of using GIFs or videos, you can render animations directly from JSON or .lottie files.

In this guide, you’ll learn how to install the Lottie React package, display an animation, and build a complete working example.

1. Install the Lottie React Package

We’ll use the @lottiefiles/dotlottie-react package to render Lottie animations in React.

Open your terminal and run:

npm install @lottiefiles/dotlottie-react

The package supports both .json and .lottie animation files.

2. Add a Lottie Animation to React

Import the DotLottieReact component and provide the URL of your animation.

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export default function App() {
  return (
    <div style={{ width: 300, height: 300 }}>
      <DotLottieReact
        src="https://assets10.lottiefiles.com/packages/lf20_touohxv0.json"
        autoplay
        loop
      />
    </div>
  );
}

Replace the sample URL with the URL of your actual animation.

3. Complete Working Example

Let’s build a simple React application that displays a Lottie animation with Play and Pause controls.

Step 1: Create a React project

If you don’t already have a React project, create one using Vite:

npm create vite@latest lottie-react-demo -- --template react
cd lottie-react-demo
npm install
npm install @lottiefiles/dotlottie-react
npm run dev

Step 2: Update src/App.jsx

Replace the contents of src/App.jsx with the following code:

import { useRef, useState } from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import './App.css';

function App() {
  const playerRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(true);

  const togglePlayback = () => {
    const player = playerRef.current;
    if (!player) return;

    if (isPlaying) {
      player.pause();
    } else {
      player.play();
    }

    setIsPlaying(!isPlaying);
  };

  return (
    <main className="app">
      <section className="card">
        <h1>React + Lottie Animation</h1>
        <p>
          Add interactive animations to your React website
          with Lottie.
        </p>

        <div className="animation">
          <DotLottieReact
            src="https://lottie.host/your-animation.lottie"
            autoplay
            loop
            dotLottieRefCallback={(player) => {
              playerRef.current = player;
            }}
          />
        </div>

        <button onClick={togglePlayback}>
          {isPlaying ? 'Pause Animation' : 'Play Animation'}
        </button>
      </section>
    </main>
  );
}

export default App;

Important: Replace https://lottie.host/your-animation.lottie with a valid, publicly accessible .lottie animation URL.

Step 3: Update src/App.css

Add the following CSS to style the page:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f6fb;
}

.app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 520px;
  padding: 32px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.card h1 {
  color: #1e293b;
  font-size: 28px;
}

.card p {
  color: #64748b;
  line-height: 1.6;
}

.animation {
  width: 100%;
  max-width: 300px;
  height: 300px;
  margin: 20px auto;
}

button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: #f45926;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background: #d9471a;
}

Step 4: Run the application

Start the development server:

npm run dev

Open the local URL shown in your terminal, usually http://localhost:5173.

You should see a Lottie animation inside a card, along with a button that lets you pause and resume playback.

4. Use a Local Lottie Animation File

You can also use a local animation file instead of a remote URL.

Place your animation inside the public/animations/ folder and update the component:

<DotLottieReact
  src="/animations/loader.lottie"
  autoplay
  loop
/>

Make sure the file path matches the location of your animation.

5. Where to Get Lottie Animations

You can use ready-made animations instead of creating them from scratch.

Explore LottieWizard to find animation assets and tools for working with Lottie files.

6. Common Issues and Fixes

Animation is not showing

• Check that the animation URL or file path is correct.
• Make sure the file is accessible and uses a supported format.

Animation is not playing

• Check that autoplay is enabled.
• Verify that the animation file is valid.

Animation looks too large or too small

• Adjust the width and height of the animation container using CSS.

Frequently Asked Questions

– Can I use Lottie animations in React?

Yes. You can use the @lottiefiles/dotlottie-react package to display Lottie animations in React applications.

– Does React support JSON and .lottie files?

Yes. The DotLottie React package supports both JSON and .lottie animation formats.

– Can I use Lottie animations in Next.js?

Yes. You can integrate Lottie animations into Next.js using a compatible React player. Components that require browser APIs should be loaded on the client.

Conclusion

Adding Lottie animations to React is straightforward with the @lottiefiles/dotlottie-react package. Install the package, import the component, and provide your animation file URL to display an interactive animation.

Explore LottieWizard for animation assets and tools to simplify your workflow.

Related Articles

• How to Add Lottie Animations to a Website With HTML
• Lottie JSON vs .lottie: What’s the Difference?
• How to Compress a Lottie JSON File Without Losing Quality