Jump to content
Search Community

Timeline in a web worker

George Moo test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all,


I have a quick, simple question (I think!) : can I use gsap inside a web worker? I've tried importing it, but I get an error in my console which says Uncaught ReferenceError: document is not defined. Which is not surprising, since the worker can't see the DOM.


A brief overview of what I'm trying to accomplish: I have a complex ThreeJS scene which includes a 3D character. I use TimelineMax to create animated timelines to sync the character's lips with audio files of the character's speech. The audio files come from a text-to-speech API so they are different every time. The system I've developed works perfectly because the API I'm using gives me an XML file of the mouth visemes and timings along with the audio. So I simply manipulate my character's mouth morph shapes with a TimelineMax. In fact I have a virtual object called "face" and it has properties pertaining to the available morph shapes, so it's something like


face = {
  smile: 0,
  grin: 0,
  sad: 0,
  AA: 0,
  EE: 0,
  EH: 0,
  ER: 0,
  F: 0,
  IH: 0
  etc. etc.

and I simply animate these properties of face between 0 and 1 and on my requestAnimationFrame update I manipulate the 3D mesh accordingly, so I don't manipulate and DOM elements at all. This has worked perfectly for some time.


Now, however, I'm looking at moving my 3D scene to an offscreencanvas to speed up its rendering but also to prevent the main page becoming janky whilst the assets are loading. Does anyone have any suggestions as to how I might continue to use TimelineMax please? I don't need the full functionality of gsap.


Any pointers much appreciated, thank you :o)

Link to comment
Share on other sites

  • Solution

Hi @George Moo


GSAP is just pure JavaScript, so it can work in almost any environment but obviously it'd need things like window.requestAnimationFrame and CSSPlugin requires access to the document too. It's very difficult to offer solutions when you haven't provided a minimal demo that clearly illustrates the problem, but I wonder why you'd need to leverage GSAP in the Web Worker anyway - wouldn't you only use that to do CPU-intensive calculations that aren't related to the DOM at all? Why not use GSAP on the main thread and just segregate CPU-heavy stuff to the other thread? 


Also, why are you using TimelineMax? That's a relic from the distant past - TweenLite/Max/TimelineLite/Max have all been consolidated into the gsap object. The API is much simpler and more powerful ever since v3 (2019). I'd strongly recommend moving to the more modern API - it should be quite easy to do.


Good luck!

Link to comment
Share on other sites

Hi Jack,


thanks for replying so quickly. Upgrading to GSAP fixed my issue! What's weird is that I thought I was using the latest gsap already. I'm a Business Green member, after all, but indeed I was using the old TimelineMax from a folder deep in my project! What an idiot.


But please, to those of us who started out with Macromedia Flash and still consider animating with JS a new thing, please don't call our tools "a relic from the distant past" - we feel old enough already! 🤣


But for future reference, with the advent of offscreencanvas, web workers are no longer just for off-screen computations. We can now render to canvases in separate memory threads and free up the main thread: https://threejs.org/examples/webgl_worker_offscreencanvas.html. I guarantee you'll be hearing a lot more about it from hereon...


Thanks again,



  • Haha 1
Link to comment
Share on other sites

On 5/29/2023 at 12:51 AM, George Moo said:

But please, to those of us who started out with Macromedia Flash and still consider animating with JS a new thing, please don't call our tools "a relic from the distant past" - we feel old enough already! 🤣

LOL! Sorry about that ;)


Glad you got it all working now. 🙌

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...