Having trouble with webpack imported TweenMax on opacity tweens

[dbryand]

I'm using GSAP in React in a Webpack built app. When any animation with opacity related tweens runs, I get the following error.

It seems like I'm incorrectly getting bucketed into the _supportsOpacity = false category, which I can't exactly explain. For some reason, in Chrome and Safari while using import {Power2, TimelineMax, TweenMax} from 'gsap' this line returns false. However, if I run the same type of code in console on the same page it works fine:

Ultimately after tracing that back, it seems like _gScope doesn't get access to window and realize that I'm using Chrome, which can obviously handle opacity. That puts me on a path where removeAttribute gets called on on the CSSStyleDeclaration, which is not valid:

Hoping this is something you've seen a bunch. Appreciate the advice--thanks.

[dbryand]

I just setup a bare-bones app and pasted the exact same component from my problematic project and it worked perfectly. I must have something conflicting in my larger project that was throwing errors. If you haven't seen this before and don't know what's going on please feel free to close.

[dbryand]

One more thing, if you're interested. When I use a from with autoAlpha: 0, the thing blows up and immediately throws that error and doesn't tween anything else. However, when I go to autoAlpha: 0 the resize happens and then at the very end the div disappears, with no errors thrown.

[jackdoyle]

Hm, I've never heard of anything like that before, no. It does kinda seem like your build is somehow trying to run GSAP before the browser "exists" (window). Tough to troubleshoot blind, but I'm glad you tried to isolate things in a reduced test case and it ran well. I wish I had a better answer for you, but this certainly seems to be an isolated case related to your particular environment/build. Well, at least nobody else has reported anything like this before.

Please do let us know if you track down the root cause of the issue.

[dbryand]

I will. Thank you, Jack. I have to say that your efforts in responding to issues and forum posts to maintain quality of the user experience as well as the quality of your library is greatly appreciated. Excellent work!

[dbryand]

Alright, with a fresh set of eyes and a large cup of coffee, I tracked it down. Bitten by cargo-culting a solution to a Webpack setup issue for video.js.

In retrospect this seems crazy dangerous, but I had this in my Webpack config, which meant GSAP couldn't find my window.

       new webpack.DefinePlugin({
         'typeof global': JSON.stringify('undefined')
       }),

Removing this makes GSAP happy again.

[jackdoyle]

Excellent, thanks for reporting back with your findings. And thanks for the kind words! Happy tweening.