Getting React Gsap Enhancer working with webpack?

[motebotic]

Love this tool and was wondering if anyone with some webpack experience can help me get it working with react. (I use webpack, babel, nodejs).

 

So to get it working I have had to import {TimelineMax} from 'gsap' at the application entry point (app.js) and then it works in any component without importing it. If I import gsap in just a component I get a document is not defined error. My guess is if I can work out how to load gsap in webpack this will fix the problem (react-gsap-enhancer works without problems as long as I include gsap on entry point). 

 

Can anyone give me guidance if I am on the right path and maybe how I load this file in webpack and/or if doing what I am doing right now to make it work is a bad idea (:

[OSUblake]

If you're getting a document is not defined error, it sounds like you are loading GSAP in a node environment. I looked at the demo folder and saw GSAP being loaded in a regular script tag, but I don't know if that is just for demo purposes. This isn't a GreenSock product, so you're best bet is to go ask over on there.

https://github.com/azazdeaz/react-gsap-enhancer

[motebotic]

Thanks Blake,

 

My problem is with setting up gsap in webpack in a node environment, without using hackery I don't think I should be doing. gsap react enhancer needs gsap to work. I have read a few posts on this, and my newbieness handicaps my understanding & attempts at making them work. I was hoping something could be done in webpack that just makes it so I can import TimelineMax for example in the component that's using it.

 

So to be clear:

- I have it working by importing gsap into the entry page where webpack does its magic. 

- I don't know why it works or should that even be done.

- I am hoping someone can answer how or if I even can set this up in webpack as a loader or something and the best way to do it. 

 

React GSAP Enhancer works perfectly by the way for any other react developers out there (:

[OSUblake]

GSAP is not currently setup to be used in modules like that. Everything is global, so you only need to include the following line of code once.

import "gsap";

Doing the following does not assign TimelineMax to the import, and you're effectively running the same line of code above.

import {TimelineMax} from "gsap";

Once you import "gsap", you can use TimelineMax as you normally would without using another import. That said, I do not know how the react-gsap-enchancer actually works with GSAP. 

 

There is a gitter room setup for the react-gsap-enhancer, so you might get a quicker response asking your question(s) over there.

https://gitter.im/azazdeaz/react-gsap-enhancer

 

 

[OSUblake]

And look at the index.html page in demo folder over there.

https://github.com/azazdeaz/react-gsap-enhancer/blob/79cb19f7fafc4d6ab68179132502b983a3b2c3f5/demo/src/index.html

 

GSAP is inside a normal script tag, and does not appear to be part of webpack.

[OSUblake]

From Gitter...

 

[motebotic]

Thanks for your help Blake, that really lead me to understand a few things. Enjoying gsap btw, awesome product.