Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
By Sarah Gooding - Feb 12, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@lottiefiles/dotlottie-wc
Advanced tools
@lottiefiles/dotlottie-wc
Web component wrapper around the dotlottie-web library
@lottiefiles/dotlottie-wc
Contents
Introduction
A web component for rendering and playing Lottie and DotLottie animations in web applications.
What is dotLottie?
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".
Installation
npm install @lottiefiles/dotlottie-wc
Usage
Via npm
After 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';
Via CDN
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>
APIs
Attributes
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. |
RenderConfig
The renderConfig object accepts the following properties:
| Property name | Type | Required | Default | Description |
|---|---|---|---|---|
devicePixelRatio | number | window.devicePixelRatio | 1 | The device pixel ratio. |
Properties
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. |
Development
Setup
npm install
Dev
npm run dev
Build
npm run build
FAQs
Web component wrapper around the dotlottie-web library
The npm package @lottiefiles/dotlottie-wc receives a total of 17,190 weekly downloads. As such, @lottiefiles/dotlottie-wc popularity was classified as popular.
We found that @lottiefiles/dotlottie-wc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 11 Feb 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
By Sarah Gooding - Feb 11, 2025
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025