search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.86k stars 2.85k forks source link

SVG renderer doesn't work in Web Worker on Safari #2922

Open renspoesse opened 1 year ago

renspoesse commented 1 year ago

When trying to render an animation with renderer: "svg" and using the lottie_worker.js build on Safari 16.2, only the first frame renders and then nothing happens. Demo: https://codesandbox.io/s/twilight-shape-nc9cck.

(The project I'm using this in generates the following error, but this may be due to webpack somehow):

TypeError: window.requestAnimationFrame is not a function. (In 'window.requestAnimationFrame(first)', 'window.requestAnimationFrame' is undefined)
bodymovin commented 1 year ago

indeed, requestAnimationFrame is not avaialble in safari workers. I'll add a polyfill

renspoesse commented 1 year ago

It might also work to call requestAnimationFrame on the main thread and only have the worker prepare the DOM changes?

bodymovin commented 1 year ago

It's safer to run it in the worker, since lottie pauses the loop on certain circumstances. For example in cases where there are no animations running. Moving all that logic to the main thread would mean duplicating several things, and needing more communication between domains.

nnhk23 commented 9 months ago

hey @bodymovin! Curious if there's yet a polyfill for lottie worker SVG renderer on safari?