Lottie

~62kb gzipped

Render After Effects animations on the web via a single JSON file.

01

See It in Action

Each demo plays a real designer-made Lottie file -- illustrations no amount of CSS can reproduce by hand.

Click the Pay Now button to play a designer-made success animation. The entire checkmark+confetti sequence is a single JSON file -- impossible to recreate in CSS.

Preview
02

What is Lottie?

Lottie is a JavaScript library that plays designer-made animations on the web. A designer creates the animation in Adobe After Effects, exports it as a single JSON file (via the Bodymovin plugin), and Lottie renders it -- identical to the original -- as SVG or canvas in the browser.

Instead of hand-coding every frame, you hand off animation work to a designer and drop their JSON into your page. The result is infinitely scalable, far smaller than video or GIF, and fully controllable from JavaScript -- you can play, pause, reverse, loop, jump to any frame, or drive the animation from scroll position.

📄
JSON-Driven Animations
Designers export After Effects animations as a single JSON file. Lottie plays that JSON on the web -- no conversion, no manual recreation.
🔍
Infinitely Scalable
Animations are vector-based, so they stay crisp at any size -- retina displays, 4K, zoom. No pixelation like GIFs or video.
🎛️
Full Playback Control
Play, pause, reverse, loop, jump to any frame, or scrub with scroll position. Every frame is addressable from JavaScript.
03

When to Use Lottie

Use when
✓ Success and error state animations (checkmarks, warning pulses)
✓ Onboarding illustrations and empty states
✓ Loading spinners and progress indicators
✓ Animated icons and micro-interactions
✓ Scroll-driven hero illustrations on marketing pages
Avoid when
✕ Real-time procedural animations (use GSAP or Motion instead)
✕ 3D scenes with meshes, lights, or cameras (use Three.js or Babylon.js)
✕ Simple fade and slide effects (CSS transitions are enough)
04

How Lottie Compares

Lottie vs Rive

Rive is the interactive successor to Lottie -- its state machines react to inputs like hover, click, or data. Lottie plays a fixed JSON file; Rive files respond to the user.

Lottie wins at
Massive designer ecosystem (LottieFiles), huge library of ready-made animations, simpler mental model, widest adoption
Rive wins at
Interactive state machines, runtime inputs, smaller file sizes for the same complexity, built-in editor (rive.app)
Lottie vs GSAP

GSAP builds animations from scratch in code -- any property, any shape, any timing. Lottie plays pre-made designer files. They're complementary: GSAP animates the page, Lottie plays the illustration inside it.

Lottie wins at
Designer hands off a JSON file, no code rewriting needed, complex multi-layer illustrations, stays crisp at any size
GSAP wins at
Animates anything on the page (DOM, SVG, canvas), ScrollTrigger plugin, timeline sequencing, full control over every value
Lottie vs CSS Animations

CSS is perfect for simple transitions and keyframes. Lottie is for illustrations that a designer drew in After Effects -- things with tens of shapes, bezier paths, and timing curves that CSS cannot express.

Lottie wins at
Designer-created illustrations, complex bezier-path animations, many shapes moving together, single-file delivery
CSS Animations wins at
Zero dependencies, smallest possible bundle, works in every browser, perfect for hovers and transitions
05

Get Started with Lottie

Terminal 
npm install lottie-web
Terminal 
yarn add lottie-web
HTML 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/player/lottie.min.js"></script>
Quick Start 
import lottie from "lottie-web";

// Play a Lottie animation inside a container element
lottie.loadAnimation({
  container: document.getElementById("animation"),
  renderer: "svg",            // "svg" | "canvas" | "html"
  loop: true,
  autoplay: true,
  path: "https://example.com/animation.json"  // JSON exported from After Effects
});
06

Related Libraries

Rive
Interactive vector animations with state machines.