@lottiefiles/dotlottie-web
Version:
Lottie and DotLottie player for the web
96 lines (65 loc) • 4.8 kB
Markdown
# @lottiefiles/dotlottie-web
<p align="center">
<img src="https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png" alt="dotLottie Logo" />
</p>
## Table of Contents
* [Introduction](#introduction)
* [What is dotLottie?](#what-is-dotlottie)
* [Documentation](#documentation)
* [Supported Platforms](#supported-platforms)
* [Browser Requirements](#browser-requirements)
* [Live Examples](#live-examples)
* [Contributing](#contributing)
* [Issues](#issues)
## Introduction
`@lottiefiles/dotlottie-web` is a JavaScript library for rendering [Lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://dotlottie.io) animations in Node.js and web environments. It provides a simple and intuitive API for loading, playing, and controlling animations, as well as advanced features like interactivity and theming.
### What is dotLottie?
dotLottie is an open-source file format that bundles one or more Lottie animations along with their assets into a single, compressed .lottie file. It uses ZIP compression for efficient storage and distribution. The format also supports advanced features like interactivity and theming, making it a powerful tool for creating dynamic and interactive animations.
[Learn more about dotLottie](https://dotlottie.io/).
## Documentation
To get started with `@lottiefiles/dotlottie-web`, follow the [documentation here](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/).
## 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
The library requires modern browser features for optimal performance. The following browser APIs are essential:
| Feature | Required | Can I Use |
| ------------------- | ---------- | -------------------------------------------------------------- |
| **WebAssembly** | ✅ Yes | [WebAssembly support](https://caniuse.com/wasm) |
| **Canvas 2D API** | ✅ Yes | [Canvas 2D support](https://caniuse.com/canvas) |
| **Fetch API** | ✅ Yes | [Fetch API support](https://caniuse.com/fetch) |
| **Web Workers** | Optional\* | [Web Workers support](https://caniuse.com/webworkers) |
| **OffscreenCanvas** | Optional\* | [OffscreenCanvas support](https://caniuse.com/offscreencanvas) |
\*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)
#### Enhanced Features
* **Web Workers**: Enable background processing for better performance
* **OffscreenCanvas**: Allow rendering on worker threads for improved responsiveness
For legacy browser support, consider using WebAssembly polyfills, though performance may be significantly reduced.
## Live Examples
Explore these CodePen examples to see `@lottiefiles/dotlottie-web` in action:
* [Getting Started](https://codepen.io/lottiefiles/pen/JjzJZmL)
* [Controlling Animation Playback](https://codepen.io/lottiefiles/pen/dyrRKwg)
* [Dynamic Animation Loading](https://codepen.io/lottiefiles/pen/JjzJZgB)
* [dotLottie Worker](https://codepen.io/lottiefiles/pen/VwJZPrQ)
* [Multi Animations .lottie file](https://codepen.io/lottiefiles/pen/wvOxdRa)
* [Advanced Animation Layout](https://codepen.io/lottiefiles/pen/LYvZveR)
* [Named Markers](https://codepen.io/lottiefiles/pen/RwOROKp)
* [dotLottie Theming](https://codepen.io/lottiefiles/pen/BaEzEeq)
* [dotLottie Interactivity](https://codepen.io/lottiefiles/pen/VwJvdRN)
## Contributing
We welcome contributions! Please see our [contributing guidelines](../../CONTRIBUTING.md) for more details on how to get started with the project locally.
## Issues
Encountered a problem or have a feature request? Log an issue in our [issues](https://github.com/LottieFiles/dotlottie-web/issues) tab. You can also browse through older issues and discussions to find solutions to common problems.