# Lottie Web — Render After Effects Animations Natively on the Web

> Lottie Web parses Adobe After Effects animations exported as JSON with Bodymovin and renders them in real time using SVG, Canvas, or HTML.

## Install

Save in your project root:

# Lottie Web — Render After Effects Animations Natively on the Web

## Quick Use
```bash
npm install lottie-web
```
```js
import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animation.json'
});
```

## Introduction
Lottie Web, created by Airbnb, bridges the gap between motion designers and developers. Designers export After Effects compositions as lightweight JSON files via the Bodymovin plugin, and Lottie renders them at any resolution without rasterization artifacts. The result is production-quality animation with a fraction of the file size of GIF or video.

## What Lottie Web Does
- Renders After Effects animations exported as JSON in real time
- Supports SVG, Canvas, and HTML renderers for different performance profiles
- Provides a playback API for play, pause, seek, speed, and direction control
- Handles complex features like masks, mattes, expressions, and shape layers
- Works in all modern browsers and integrates with React, Vue, and Angular wrappers

## Architecture Overview
Lottie parses Bodymovin JSON into an internal animation model that maps After Effects layers, keyframes, and expressions to web primitives. The SVG renderer builds a DOM subtree that updates on each frame via `requestAnimationFrame`. The Canvas renderer paints to a 2D context for lower memory overhead. An expression engine evaluates After Effects scripting at runtime for dynamic properties.

## Self-Hosting & Configuration
- Install from npm or load via CDN (`cdnjs.cloudflare.com/ajax/libs/lottie-web`)
- Host animation JSON files on your own server or bundle them with your app
- Use `lottie.loadAnimation()` options to control `renderer`, `loop`, `autoplay`, and `rendererSettings`
- Reduce bundle size by importing only the needed renderer: `lottie/build/player/lottie_svg.min.js`
- Pair with `lottie-api` for fine-grained control over individual layers and properties

## Key Features
- Resolution-independent vector animation at any screen size
- JSON files are typically 2-10x smaller than equivalent GIFs
- Frame-accurate playback synced to `requestAnimationFrame`
- Full interactivity: trigger animations on scroll, hover, or click events
- Large ecosystem of free animations on LottieFiles marketplace

## Comparison with Similar Tools
- **CSS Animations** — simpler to set up but limited to basic transitions and keyframes
- **GreenSock (GSAP)** — code-driven timeline animation; Lottie is designer-driven from After Effects
- **Rive** — similar concept with its own editor; Lottie leverages the existing After Effects ecosystem
- **Framer Motion** — React-specific declarative animations; Lottie is framework-agnostic
- **Animated GIF / WebP** — raster formats with large file sizes and fixed resolution

## FAQ
**Q: Do I need After Effects to create Lottie animations?**
A: After Effects with the Bodymovin plugin is the primary authorship tool, but alternatives like Haiku Animator, Flow, and LottieFiles' web editor also export compatible JSON.

**Q: Can Lottie handle interactive or data-driven animations?**
A: Yes. The playback API lets you control segments, speed, and direction. With expressions and the lottie-api library you can bind animation properties to runtime data.

**Q: Which renderer should I choose?**
A: SVG is the default and best for most use cases. Canvas uses less memory for complex scenes. HTML is legacy and rarely needed.

**Q: How large are typical Lottie JSON files?**
A: Simple icon animations are 5-20 KB. Complex illustrations range from 50-200 KB, still much smaller than equivalent video or GIF.

## Sources
- https://github.com/airbnb/lottie-web
- https://airbnb.io/lottie
- https://lottiefiles.com

---
Source: https://tokrepo.com/en/workflows/62bd3f84-44b2-11f1-9bc6-00163e2b0d79
Author: AI Open Source