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
Via npm
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});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>