⚠️ This package is no longer maintained. Please use the latest dotlottie-web here for the latest features and updates.

dotLottie Players

The official player components for dotLottie, which allows you to embed and play dotLottie animations in your web applications.

What is dotLottie?

dotLottie is an open-source file format that combines one or more Lottie files and their associated resources into a single file. These files are ZIP archives compressed with the Deflate compression method and have the file extension ".lottie".

Packages

@dotlottie/common - Core player.
@dotlottie/player-component - DotLottie web player
@dotlottie/react-player - DotLottie React player

Contributing

We use changesets to maintain a changelog for this repository. When making any changes to the codebase that impact functionality or performance, we require a changeset to be present.

To add a changeset, run:

pnpm changeset add

And select the type of version bump you'd like (major, minor, patch).

You can document the changes in detail and format them properly using Markdown by opening the ".md" file that the "pnpm changeset" command created in the ".changeset" folder. Open the file, and it should look something like this:

---
"@dotlottie/common": minor
"@dotlottie/react-player": major
---

This is where you document your **changes** using Markdown.

- You can write
- However you'd like
- In as much detail as you'd like

Aim to provide enough details so that teammates and future you can understand the changes and the context of

 the change.

Commit your changes and the changeset to your branch, and then create a pull request on the develop branch.

Our Other Lottie-related Libraries

Here are some of our other Lottie-related libraries:

lottie-react: A React component for the Lottie Web player.
lottie-vue: A Vue component for the Lottie player.
svelte-lottie-player: Lottie player component for use with Svelte.
jLottie: jLottie is suitable as a general-purpose Lottie player, though it implements a subset of the features in the core player. This approach leads to a tiny footprint and great performance.
lottie-interactivity: This is a small library to add scrolling, cursor interactivity, and interaction chaining to your Lottie animations.
lottie-js: The library consists of methods to map the Lottie JSON to the object model and interact with properties, as well as manipulate them.