greensock / GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
https://gsap.com
19.56k stars 1.72k forks source link

Is it possible to use GSAP within a Web Worker? #570

Closed gabrielecirulli closed 8 months ago

gabrielecirulli commented 8 months ago

Hi, I'm using Pixi.js for a basic scene and want to animate the sprites with GSAP. But I'm using a Web Worker and OffscreenCanvas (which Pixi.js supports) and it seems GSAP doesn't work here.

My issue is with the Pixi plugin registration. I use gsap.registerPlugin(PixiPlugin);. In _createPlugin, it calls _windowExists(), which returns false in a Worker, preventing plugin registration.

I'm not sure if GSAP works in this setup, as I can't get past this problem. I'm wondering if there's Worker support at all or if I'm overlooking something.

jackdoyle commented 8 months ago

Hm, do you have a minimal demo you can share that clearly illustrates the issue? I was always under the impression that it didn't make sense to do any kind of animation work inside a worker because the entire point is to have it driven by the requestAnimationFrame loop that's on the main thread, but it looks like there is support for requestAnimationFrame in workers.

I just updated the next release of PixiPlugin so that it doesn't require the window (you can preview the minified version at https://assets.codepen.io/16327/PixiPlugin3.min.js)

And I also made improvements to the core to accommodate this: https://assets.codepen.io/16327/gsap-latest-beta.min.js

If you can share a minimal demo so that we can verify that it works in your particular scenario, that'd be super helpful. Maybe a CodePen or Stackblitz?

jackdoyle commented 8 months ago

This should be more doable in the latest release, but let us know if you run into any trouble. A minimal demo would be super helpful.

gabrielecirulli commented 8 months ago

Thank you for looking into this! For now I decided to use popmotion instead, but in summary what I'm trying to do is render an animated game entirely within a Web Worker using OffscreenCanvas. Pixi.js is capable of running within a Worker, so GSAP would have to run there too in order not to have animation data cross the bridge every frame.

What this essentially means is that the rendering loop runs in a completely isolated thread than the main browser thread. This theoretically helps with performance because your renderer and animations wouldn't have to share resources with other scripts.

jackdoyle commented 8 months ago

Thanks for the added details. Did you try the latest release of GSAP?

gabrielecirulli commented 8 months ago

No, I won’t be testing it out as I’ve found a good fit with popmotion and the deadline I have doesn’t leave much space for experimentation. But I will keep it in mind for future projects and maybe this tweak will help other folks who find the issue!

Thank you!

On Fri, Jan 19, 2024 at 20:06 Jack Doyle @.***> wrote:

Thanks for the added details. Did you try the latest release of GSAP?

— Reply to this email directly, view it on GitHub https://github.com/greensock/GSAP/issues/570#issuecomment-1900959837, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGYJ6Y73ZKHUF34OMAUQ2TYPK74VAVCNFSM6AAAAABBZURHSOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBQHE2TSOBTG4 . You are receiving this because you authored the thread.Message ID: @.***>