lottie-web
Lottie Web is a library for rendering Adobe After Effects animations exported as JSON files through the Bodymovin plugin directly in the browser. Lottie animati…
Installation
npm install lottie-web
yarn add lottie-web
pnpm add lottie-web
Import
import lottie from 'lottie-web';
Quick Example
import lottie from 'lottie-web';
const animation = lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/animations/loading.json',
});
// Control playback
animation.setSpeed(1.5);
animation.pause();About lottie-web
Lottie Web is a library for rendering Adobe After Effects animations exported as JSON files through the Bodymovin plugin directly in the browser. Lottie animations are resolution-independent vector animations that play smoothly at any size, weigh significantly less than equivalent GIF or video files, and can be controlled programmatically. The library supports three renderers — SVG (best quality), Canvas (better performance for complex animations), and HTML (limited but lightweight) — allowing developers to choose the best trade-off for their use case. Lottie provides a comprehensive playback API with play, pause, stop, setSpeed, setDirection, goToAndPlay, goToAndStop, and event listeners for complete, loopComplete, and enterFrame. Animations can be loaded from URLs, local files, or inline JSON data. The library handles masks, mattes, trim paths, shape morphing, and most After Effects features through Bodymovin's export. Lottie has transformed how animations are implemented in web and mobile applications — designers create animations in After Effects, export them as JSON, and developers render them with a few lines of code. The react-lottie and lottie-react wrapper libraries provide React components for easier integration. LottieFiles.com provides a marketplace of free and premium animations.
Quick Facts
| Package | lottie-web |
| Category | UI Component |
| Weekly Downloads | 1M+ |
| License | MIT |
| Install | npm install lottie-web |
Related Packages
Framer Motion is the most popular animation library for React, providing a simple declarative API fo…
React Spring is a spring-physics-based animation library for React that covers most UI animation nee…
Three.js is the most popular JavaScript library for creating and displaying 3D graphics in web brows…
D3.js (Data-Driven Documents) is the most powerful and flexible JavaScript library for creating cust…
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.