🎉 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!

[callmejm]

Hi, is there any example about DotLottieWorker for react platform ? Thanks !

[theashraf]

@callmejm Here's a CodePen example: https://codepen.io/lottiefiles/pen/yyBYRVd.

Please note that the DotLottieWorkerReact component shares the exact same interface as DotLottieReact. This means all DotLottieReact examples will work fine if you simply replace the DotLottieReact component with DotLottieWorkerReact

[callmejm]

Hi @theashraf I using .lottie file, and i just replace from DotLottieReact to DotLottieWorkerReact, i getting this error Failed to load animation data from URL: assets/lottie/effect.lottie. TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from assets/lottie/effect.lottie

[callmejm]

using version @lottiefiles/dotlottie-react@0.11.0

[theashraf]

@callmejm try to provide the absolute URL of the animation you're trying to load when using dotLottie workers

const absoluteUrl = new URL('assets/lottie/effect.lottie', import.meta.url).href;

const App = () => <DotLottieWorkerReact  src={absoluteUrl} loop autoplay />