Stop 14 · AnimationsTopics · 4/5

Lottie

In short

A designer made a lovely success tick animation in After Effects. Lottie lets you play it on the web as a small JSON file, no video, no GIF blur, crisp at any size.

A library (with React bindings) that plays back After Effects animations exported as lightweight JSON files — used for rich, designer-created micro-animations without hand-coding them.

The jaadu reads sheet music at a music stand while a bulky recorder sits ignored in the corner.

Think of it like this

Sheet music instead of a recording

A recording is a big audio file. Sheet music is a few pages of instructions any musician can play. A Lottie file is sheet music for animation: shapes and keyframes in JSON, and the player draws it live.

Watch it happen

From designer to your page

AE file

Bodymovin

JSON

lottie-react

Screen

1/5A designer animates the success tick in After Effects using shapes and keyframes.

The big ideas

What you need to know

Designers make, devs play

Animators export from After Effects with the Bodymovin plugin, or grab free files from LottieFiles.

It's vector JSON

Shapes stay sharp on any screen. Files are often much smaller than a GIF or video of the same animation.

Fully controllable

Play, pause, change speed or jump to a frame from code, for example play the tick only after payment succeeds.

See it in code

Walk through the code

tsx

1"use client";2import { useRef } from "react";3import Lottie, { type LottieRefCurrentProps } from "lottie-react";4import successTick from "./success-tick.json";5 6export function PaymentDone() {7  const ref = useRef<LottieRefCurrentProps>(null);8  return (9    <div style={{ width: 160 }}>10      <Lottie lottieRef={ref} animationData={successTick} loop={false} autoplay={false} />11      <button onClick={() => ref.current?.play()}>Pay ₹199</button>12    </div>13  );14}

1/4Import the Lottie component, its ref type, and the animation JSON file.

autoplay={false} keeps the tick still until you call play(). Wrap the Lottie in a sized div, otherwise it stretches to fill its parent.

Save yourself the pain

Common mistakes

Oops

Using a 2MB Lottie file for a tiny loader.

Do this instead

Check the JSON size. Ask the designer to simplify, or use a CSS loader for something that small.

Oops

Importing the JSON on a page where the animation is far below the fold.

Do this instead

Lazy load the component so the JSON downloads only when it's needed.

Your mission

Celebrate a form submit

~20 min

Quick check

Why is a Lottie animation often sharper than a GIF on a high-resolution phone?

Go deeper

1Embed a free Lottie animation (from lottiefiles.com) into a project.
2Learn how designers export After Effects animations for Lottie.
3Compare the file size and quality of a Lottie animation vs the equivalent GIF or video.