A format and renderer for shipping designer-made animations. Designers export from After Effects (via Bodymovin) to a small JSON file, and lottie-web renders it as crisp, scalable vector animation in the browser.
The animation below is a genuine Lottie JSON rendered by lottie-web. Play, pause, scrub and change speed — these all call the real player API. It first tries a public LottieFiles JSON, then falls back to an embedded JSON so it always plays.
const anim = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://assets.lottiefiles.com/…/data.json' }); anim.setSpeed(1.5); anim.goToAndStop(30, true);
Because Lottie renders to SVG, the same JSON is razor-sharp at any size — no pixelation. Here's the embedded animation at three scales, all the same source.
Loading Lottie takes one script tag and one call. You can point path at a hosted JSON, or pass the JSON object directly with animationData (what this page falls back to).
<!-- 1. the renderer --> <script src="https://cdn.jsdelivr.net/npm/lottie-web/build/player/lottie.min.js"></script> <div id="box"></div> // 2. one call — remote file… lottie.loadAnimation({ container: box, renderer:'svg', loop:true, autoplay:true, path: 'https://assets10.lottiefiles.com/packages/lf20_xxxxx.json' }); // …or inline JSON object lottie.loadAnimation({ container: box, animationData: myJSON, loop:true });
cdn.jsdelivr.net/npm/lottie-web. The page first tries to load a public Lottie JSON from assets*.lottiefiles.com; if that request fails it renders an embedded inline Lottie JSON instead, so a genuine Lottie animation always plays. Play / pause / scrub / speed all call the actual player API. Page chrome is the shared CSS shell.