DEV Community

Fazal Shah
Fazal Shah

Posted on

How to Use Lottie Animations in React (Complete Guide)

#react #animation #webdev #javascript

Lottie animations are lightweight JSON files that render as crisp vector animations at any resolution. In this guide, I'll show you the fastest way to get them running in React.

What You Need

A Lottie JSON file. If you don't have one, grab a free one from IconKing's free Lottie library — 500+ free animated icons, no signup.

Method 1: @lottiefiles/dotlottie-react (Recommended)

This is the modern approach. DotLottie is the newer .lottie format — it's a zipped version of Lottie JSON with ~80% smaller file sizes.

npm install @lottiefiles/dotlottie-react
Enter fullscreen mode Exit fullscreen mode 
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export default function App() {
  return (
    <DotLottieReact
      src="/animations/loader.lottie"
      loop
      autoplay
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

For plain JSON files, use the src prop with a .json path instead.

Method 2: lottie-web (Classic)

If you need more control or are working with older JSON files:

npm install lottie-web
Enter fullscreen mode Exit fullscreen mode 
import { useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import animationData from './animation.json';

export default function LottieAnimation() {
  const container = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: container.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData,
    });
    return () => anim.destroy();
  }, []);

  return <div ref={container} style={{ width: 200, height: 200 }} />;
}
Enter fullscreen mode Exit fullscreen mode

Controlling Playback

With lottie-web, you have full control:

const anim = lottie.loadAnimation({ ... });

// Play
anim.play();

// Pause
anim.pause();

// Set speed (1 = normal, 2 = 2x)
anim.setSpeed(1.5);

// Go to specific frame
anim.goToAndStop(30, true); // frame 30

// Play a segment (frames 0–60)
anim.playSegments([0, 60], true);
Enter fullscreen mode Exit fullscreen mode

Lazy Loading Animations

For performance, lazy load animation JSON files instead of bundling them:

import { useEffect, useRef, useState } from 'react';
import lottie from 'lottie-web';

export default function LazyLottie({ src }) {
  const container = useRef(null);

  useEffect(() => {
    let anim;
    fetch(src)
      .then(res => res.json())
      .then(data => {
        anim = lottie.loadAnimation({
          container: container.current,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: data,
        });
      });
    return () => anim?.destroy();
  }, [src]);

  return <div ref={container} />;
}
Enter fullscreen mode Exit fullscreen mode

Converting Lottie to Other Formats

Need to export to GIF, MP4, or WebP for use outside your app? The free Lottie to GIF converter at IconKing handles all conversions in the browser — no upload needed.

Supported exports: GIF, MP4, WebM, SVG, WebP, APNG, .lottie

Editing Lottie Colors and Speed

Before using an animation in your app, you might want to adjust colors to match your brand or tweak the playback speed. The free IconKing Lottie editor lets you do this in-browser without touching After Effects.

Performance Tips

  • Use SVG renderer for most UI animations — it's the sharpest and most flexible.
  • Use canvas renderer for complex animations with many layers or particle effects.
  • Destroy animations when components unmount to avoid memory leaks (the useEffect cleanup above handles this).
  • Prefer .lottie format over JSON when possible — the compressed format loads significantly faster.

File Size Reference

Animation type Typical JSON size Typical .lottie size
Simple icon (2–3 layers) 15–40KB 5–15KB
UI loader 20–60KB 8–20KB
Complex illustration 80–300KB 25–80KB

Free Resources

Top comments (0)