A web component for rendering and playing Lottie and DotLottie animations in web applications.
dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".
npm install @lottiefiles/dotlottie-wcAfter installation, you can use dotlottie-wc in your HTML file:
<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay="true" loop="true"></dotlottie-wc>And import it in your JavaScript or TypeScript module:
import '@lottiefiles/dotlottie-wc';You can also use the component directly via a npm CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@lottiefiles/dotlottie-wc | Basic Example</title>
</head>
<body>
<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>
<script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
</body>
</html>The dotlottie-wc component accepts all configuration attributes of DotLottie from @lottiefiles/dotlottie-web, allowing you to customize your animation as required.
| Attribute | Type | Description |
|---|---|---|
src |
string | URL of the Lottie or DotLottie animation. |
autoplay |
boolean | Automatically start the animation. |
loop |
boolean | Loop the animation. |
speed |
number | Playback speed. |
data |
string | Animation data as a string or ArrayBuffer for .lottie animations. |
segment |
Array | Animation segment as an array of two numbers (start frame and end frame). |
mode |
string | Animation play mode (e.g., "forward", "bounce"). |
backgroundColor |
string | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000FF"). |
renderConfig |
Object (RenderConfig) | Configuration for rendering the animation. |
The renderConfig object accepts the following properties:
| Property name | Type | Required | Default | Description |
|---|---|---|---|---|
devicePixelRatio |
number | window.devicePixelRatio | 1 | The device pixel ratio. |
The dotlottie-wc exposes the following properties:
| Property name | Type | Description |
|---|---|---|
dotLottie |
DotLottie |
The dotLottie instance from DotLottie , allowing you to call methods and listen to events for more control over the animation. |
npm installnpm run devnpm run build