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

Terminal window
npm install @lottiefiles/dotlottie-web

Usage

Basic Usage

After installation, you can import DotLottie in your JavaScript or TypeScript module:

index.html
<!-- Canvas element where the animation will be rendered -->
<canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>
index.js
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
});

With Advanced Options

import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({
canvas: document.querySelector('#canvas'),
autoplay: true,
loop: true,
src: "https://path-to-your-animation.lottie",
renderConfig: {
autoResize: true,
devicePixelRatio: 1,
},
backgroundColor: "#ff0000",
speed: 1.5,
segment: [10, 50],
layout: {
fit: 'contain',
align: [0.5, 0.5]
}
});

Via CDN

index.html
<!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>

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

FeatureRequired
WebAssembly✅ Yes
Canvas 2D API✅ Yes
Fetch API✅ Yes
Web WorkersOptional*
OffscreenCanvasOptional*

*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)