Lottie-web is a JavaScript library designed to render animations exported from Adobe After Effects as JSON files, leveraging the Bodymovin plugin. It enables designers to deliver complex, vector-based animations across web platforms without the need for manual re-coding by engineers, significantly streamlining the animation pipeline. The package, as of the provided context, is at version 5.13.0, which includes critical bug fixes and improvements, notably around Node.js compatibility for SSR. Lottie-web is actively maintained, with new features and bug fixes released periodically, though major versions with breaking changes (like the recent v6) are less frequent. Key differentiators include its tight integration with After Effects, robust performance across SVG and Canvas renderers, and a comprehensive API for controlling animation playback, speed, and segments. It is a core component of the broader Lottie ecosystem, alongside its counterparts for Android, iOS, and React Native, providing a unified animation solution.
npm install lottie-webVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to import `lottie-web`, initialize an animation using inline JSON data, and attach basic play/pause controls on mouse events.
Review the v6 changelog and migrate `loadAnimation` calls to the new signature. Update animation control calls to use the `AnimationItem` instance (e.g., `anim.destroy()` instead of `lottie.destroy('name')`).For browser environments, consider using an ESM-compatible CDN or ensure your build process correctly bundles ESM or CJS versions. For Node.js (SSR), ensure your setup correctly handles ESM or CJS imports.
Always call `animationInstance.destroy()` when the animation's container element is removed from the DOM or the animation is no longer required. For versions prior to v6, `lottie.destroy(animationName)` could also be used.
Ensure `assetsPath` in `loadAnimation` points to the correct base directory for images, or verify that image paths within the JSON are correct relative to the HTML file or the animation loader's context.
Experiment with different renderers based on animation complexity and target device performance. SVG is often the default and a good starting point for vector animations.
For new projects, evaluate `@lottiefiles/dotlottie-web` if `.lottie` format, WebAssembly, or Web Workers are priorities. Continue using `lottie-web` for existing projects or when direct JSON rendering is preferred.
Verify the import statement (`import lottie from 'lottie-web';` or `const lottie = require('lottie-web');`). Ensure the correct version of `lottie-web` is installed for your code's API usage. If using a `<script>` tag, ensure it's loaded before your animation logic.Always store the return value of `lottie.loadAnimation()` into a variable (e.g., `const anim = lottie.loadAnimation(...)`). Add checks (`if (anim) { anim.play(); }`) to ensure the instance exists before interacting with it. For v6, ensure you're calling `play()` on the instance, not the global `lottie` object.Double-check the `container` element's ID and existence, the `path` to your `.json` file, and ensure `autoplay` is `true` if immediate playback is desired. Verify the container has sufficient `width` and `height` and is visible in the DOM. Check browser console for network errors loading the JSON.
Ensure that the `assetsPath` option in `lottie.loadAnimation` correctly points to the directory containing your animation's images. If no `assetsPath` is specified, images are expected to be relative to the animation JSON file or the page's base URL.
No dependency data recorded yet.