DotLottieWorker

DotLottieWorker is a class introduced in @lottiefiles/[email protected], designed to offload animation rendering to a dedicated Web Worker. This enhancement significantly boosts application performance by freeing the main thread from the heavy lifting of animation rendering.

Installation

To use DotLottieWorker, install the @lottiefiles/dotlottie-web package:

npm install @lottiefiles/dotlottie-web

Basic Usage

To utilize DotLottieWorker for animation rendering, follow this example:

import { DotLottieWorker } from '@lottiefiles/dotlottie-web';

const animation = new DotLottieWorker({
  canvas: document.getElementById('canvas'),
  src: 'url/to/animation.json',
  autoplay: true,
  loop: true,
});

Worker Grouping

By default, all animations using DotLottieWorker are rendered in the same worker. To distribute the workload across multiple workers, use the workerId property:

const animation1 = new DotLottieWorker({
  canvas: document.getElementById('canvas'),
  src: 'url/to/animation.json',
  autoplay: true,
  loop: true,
  workerId: 'worker-1',
});

const animation2 = new DotLottieWorker({
  canvas: document.getElementById('canvas-2'),
  src: 'url/to/animation2.json',
  autoplay: true,
  loop: true,
  workerId: 'worker-2',
});

This feature is useful when rendering many animations simultaneously, allowing you to distribute the rendering workload across multiple workers for improved performance.

API

DotLottieWorker offers the same API as DotLottie, with the difference that all methods are executed in the worker thread and return a Promise.

For more information on the available methods, refer to the Methods documentation.

Example:

const dotLottie = new DotLottieWorker({
  canvas: document.getElementById('canvas'),
  src: 'url/to/animation.json',
  autoplay: true,
  loop: true,
});

dotLottie.play().then(() => {
  console.log('Animation started');
});

Constructor

The DotLottieWorker constructor accepts the same configuration object as DotLottie, with the addition of the optional workerId property to specify the worker group.

Example:

const animation = new DotLottieWorker({
  canvas: document.getElementById('canvas'),
  src: 'url/to/animation.json',
  autoplay: true,
  loop: true,
  workerId: 'worker-1',
});

Properties

The DotLottieWorker instance exposes the same properties as DotLottie. Refer to the Properties documentation for more information.

Methods

The DotLottieWorker instance exposes the same methods as DotLottie. Refer to the Methods documentation for more information.

Events

The DotLottieWorker instance exposes the same events as DotLottie. Refer to the Events documentation for more information.

Performance Comparison

To see DotLottieWorker in action and compare its performance with DotLottie, check out the embedded CodePen example below:

The example runs multiple animations simultaneously using DotLottieWorker. You will observe no frame drops while rendering the animations, as the rendering is done in a separate worker thread, keeping the main thread free for other tasks.

Feedback

We believe DotLottieWorker will enhance your animation rendering experience, making your applications smoother and more efficient. We encourage you to try it and share your feedback.

For any issues or contributions, please refer to the repository’s contributing guidelines and code of conduct.