[feature request] Make it possible to initialize a lottie instance without giving a reference to a DOM node

Sometimes it takes very long for the animations to load. While the animations are being loaded the main thread is blocked by Lottie for a significant amount of time - even hundreds of milliseconds on Core i7 CPU.

I was trying to offload Lottie initialization to a Web Worker - I wanted to call lottie.loadAnimation from within a Web Worker thread. But it turned out It is not possible because WebWorkers don’t have access to DOM while lottie.loadAnimation method requires a reference to a DOM node to be passed as the container argument.

So I wonder is it possible to make the loadAnimation method DOM agnostic? It would be great if we could initialize the Lottie instance in a Web Worker thread, return it, and then mount on a DOM element.

---

PS I know there’s a canvas rendered, but Offscreen Canvas, which is supported by WebWorkers has still very poor browsers’ support: https://caniuse.com/#feat=offscreencanvas

[wujekbogdan]

I’ve described the reason in my first post in this topic: https://github.com/airbnb/lottie-web/issues/1860#issue-521131207

---

Lottie initialization process is a very CPU-heavy process, in case of complex animations the main thread gets busy for hundreds of milliseconds, even up to a 1s and more (depending on the animation complexity and the CPU). JS is single-threaded, because of this, while the animation is being processed by lottie-web, the whole application’s UI is frozen (all the animations are stopped, hovers don’t work, events are being triggered, etc). It gives a very bad user experience.

WebWorkers run in a separate thread, so offloading the init process to a separate WebWorker thread would make the init process way smoother.

So basically, this is a very standard use case for WebWorkers.

[mustafaabobakr]

Any updates ? How to init Lottie in a web worker Nextjs?