Server Rendering Compatibility

[jescalan]

So, at the moment as soon as you load the TweenLite (or TweenMax) library into your code, it makes at least one reference to the document global, which is only available in the browser. This means if you are trying to render code on the server that uses gsap (this is becoming more and more common for SPAs made with react, vue, etc), it will error out.

A common solution to this is to have libraries expose functions or classes that can be imported then initialized by the user which will run checks against window, document etc at runtime, rather than immediately when the library is imported. So for example:

// this would work when server rendered
module.exports = function () {
  return window.innerWidth
}

// this would not though
const width = window.innerWidth
module.exports = width

Generally, this means reducing the amount of code that is executed on import of the code, and moving that into code that is executed by the user when initializing or using the code. I know this would likely represent several refactors in order to get here, but I do think it would be a feature that helps to push gsap forward as a strong option for animation in modern web apps. I can tell you for sure that it would make react users very happy.

If there's any way I can help out with this, I'd be super happy to contribute, just point me in the right direction!

[jackdoyle]

Howdy @jescalan. I appreciate the suggestion. I'm curious - are you using the latest version? We put some code in place that helps make it more friendly in non-browser environments (though we can't remove all references because certain features depend on the browser). Are you using 1.19.1? Can you point to where exactly you're running into errors and what you'd suggest we change specifically? A reduced test case would be super helpful (though not essential).

I know there are a lot of people using GSAP in React, so as far as I know it's very compatible. Maybe there's something different about your setup though. I'd love to do what I can to make GSAP as accessible and easy to use as possible.

Thanks again!

[jescalan]

Hey @jackdoyle! Thanks for the quick response, and also for your incredible work on gsap 🤗

I am on 1.19.1 at the moment, and very much appreciate the recent optimizations for commonjs for sure - saving my life. So the exact issue that I ran into is here.

I spent a little time searching the codebase and testing out other plugins and I think actually this specific instance is a bug, rather than a library-wide issue. I just put in a pull request that should fix it 😁

[jackdoyle]

Ah, okay. Yeah, I'll make a tweak like that in the next version which we hope to push out in the next couple of weeks. Thanks for the suggestion and the kind words!

[jescalan]

Thank you! 🙇 Ping here / close when it's out so I know?

[jackdoyle]

Should be resolved now.