Getting Started
Introduction
Streamline your web animations with LottieFiles’ official players for dotLottie and Lottie animations. Designed for quick integration, these packages help developers swiftly bring animated visuals into web projects with minimal effort.
This player is powered by our cross-platform player dotlottie-rs.
dotLottie-web is our core web player that other framework-specific players are built on.
Installation
npm install @lottiefiles/dotlottie-webUsage
Basic Usage
After installation, you can import DotLottie in your JavaScript or TypeScript module:
<!-- Canvas element where the animation will be rendered --><canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({ autoplay: true, loop: true, canvas: document.querySelector('#dotlottie-canvas'), src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file});With Advanced Options
import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({ canvas: document.querySelector('#canvas'), autoplay: true, loop: true, src: "https://path-to-your-animation.lottie", renderConfig: { autoResize: true, devicePixelRatio: 1, }, backgroundColor: "#ff0000", speed: 1.5, segment: [10, 50], layout: { fit: 'contain', align: [0.5, 0.5] }});Via CDN
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>@lottiefiles/dotlottie-web | basic example</title> </head> <body> <!-- Canvas element where the Lottie animation will be rendered --> <canvas id="canvas" width="300" height="300"></canvas> <script type="module"> import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
new DotLottie({ autoplay: true, loop: true, canvas: document.getElementById("canvas"), src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file }); </script> </body></html>Supported Platforms
@lottiefiles/dotlottie-web is an isomorphic library designed to work in both browser and Node.js environments. It supports Node.js version 18 and higher, as well as all major web browsers.
Browser Requirements
| Feature | Required |
|---|---|
| WebAssembly | ✅ Yes |
| Canvas 2D API | ✅ Yes |
| Fetch API | ✅ Yes |
| Web Workers | Optional* |
| OffscreenCanvas | Optional* |
*Optional features enhance performance but aren’t required for basic functionality.
Minimum Browser Versions
Based on WebAssembly support requirements:
- Chrome: 57+ (March 2017)
- Firefox: 52+ (March 2017)
- Safari: 11+ (September 2017)
- Edge: 16+ (October 2017)
- Opera: 44+ (March 2017)
- iOS Safari: 11+ (September 2017)
- Android Browser: 81+ (February 2020)