🎉 Announcing DotLottieWorker in @lottiefiles/dotlottie-web v0.28.0 🎉

[theashraf]

We are excited to introduce DotLottieWorker, a new class designed to offload animation rendering to a dedicated Web Worker, significantly enhancing application performance by freeing the main thread from the heavy lifting of animation rendering. This feature is now available in @lottiefiles/dotlottie-web@v0.28.0.

Why DotLottieWorker?

DotLottieWorker aims to provide a seamless experience while maintaining the familiar API of DotLottie. Most methods remain asynchronous, ensuring smooth integration with your existing workflows.

Basic Usage

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

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 in the configuration object:

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

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

This feature is particularly useful when rendering a large number of animations simultaneously, allowing you to distribute the rendering workload across multiple workers for improved performance.

Performance Comparison

Check out this CodePen example to see DotLottieWorker in action and compare its performance with DotLottie.

We believe DotLottieWorker will enhance your animation rendering experience, making your applications smoother and more efficient. Give it a try and let us know your feedback!