lottie-web

lottie-web is the browser player half of the Lottie animation format: designers export motion graphics from Adobe After Effects as JSON using the companion Bodymovin plugin, and lottie-web renders that JSON natively in web pages using an SVG, Canvas, or HTML renderer — no video files, GIFs, or hand-coded CSS/JS re-implementations of the animation required. The library exposes a small imperative API (lottie.loadAnimation, play, pause, setSpeed, goToAndStop, segment playback) so animations can be triggered, scrubbed, and controlled in response to app state, and sibling libraries (lottie-android, lottie-ios, lottie-react-native) render the same JSON format natively on other platforms.

What You Get

• lottie.loadAnimation(options) to load and render an animation into a container element, choosing between SVG, Canvas, or HTML renderers
• Full playback control: play, pause, stop, setSpeed, setDirection, goToAndStop/goToAndPlay, and playSegments for scrubbing specific frame ranges
• Global helpers (lottie.searchAnimations, lottie.registerAnimation) that auto-discover elements with a lottie class and a data-animation-path attribute
• A rich event system (complete, loopComplete, enterFrame, data_ready, DOMLoaded, etc.) for hooking application logic into animation lifecycle
• Renderer-specific settings (rendererSettings) for controlling canvas context reuse, accessibility title/description, aspect ratio, and progressive loading

Common Use Cases

• Replacing large GIF or video loading spinners and success/error states with crisp, small, resolution-independent JSON animations
• Implementing onboarding illustrations, empty states, or micro-interactions designed in After Effects without a full custom canvas re-implementation
• Building interactive animations that scrub in response to scroll position or user input using playSegments and goToAndStop
• Sharing one exported animation asset across web, iOS, Android, and React Native via the matching Lottie player on each platform

Under The Hood

Architecture The player (player/js/) is organized into animation (the top-level AnimationItem/AnimationManager controlling playback state and frame timing), renderers (separate SVG/Canvas/HTML rendering backends implementing a common interface), elements (per-shape/layer rendering logic shared across renderers), effects and modules (filter and expression support), and utils, with the entry point parsing the Bodymovin JSON schema once and dispatching per-frame updates to whichever renderer was selected at load time.

Tech Stack Plain JavaScript (ES5/ES2015 transpiled via Babel) bundled with Rollup into build/player/lottie.js, linted with ESLint using the Airbnb base config, tested with a Puppeteer + pixelmatch visual-regression harness in test/ that renders animations and diffs pixels against reference output, and shipped with hand-written TypeScript declarations (index.d.ts).

Code Quality The codebase is large (5.6MB+ of JS across many files) and predates modern module conventions in places, but the visual-regression test suite (test/index.js with a compare mode) is a strong signal for a rendering library where unit tests alone can’t catch pixel-level regressions, and the low recent commit velocity reflects a mature, largely-feature-complete project rather than an abandoned one given its continued 6M+ weekly downloads.

API Design The core entry point lottie.loadAnimation(options) takes a single options object with sensible defaults (renderer, loop, autoplay, container) and returns a controllable instance, the global lottie.* methods mirror instance methods for simple multi-animation pages, and the README documents every method, event, and rendererSettings option with runnable snippets, though the breadth of the API (dozens of methods/events accumulated over a decade) raises the learning curve for anyone going beyond basic load/play/pause.