EasePack & Webpack

[Makio64]

Hi guys,

I get some troubleshoot about how I should require the TweenMax & Easing function in webpack

I try to add this : TweenMax: vendors+'greensock/uncompressed/TweenMax.js', EasePack: vendors+'greensock/uncompressed/easing/EasePack.js'

It works for TweenMax but I can't get the ease function like Quint when i do require('EasePack').Quint .

Thanks for helping!

[jackdoyle]

I'm not quite sure I understand your question, but keep in mind that:

• EasePack is already inside of TweenMax (no need to load it separately)
• By default, the classes are added to the global scope. It looked like you were trying to get the "Quint" property of EasePack or something, but that's not correct. You can tell GSAP to add its classes to a different object rather than the global one, by defining a GreenSockGlobals property of the global scope.

Does that help at all?

[tcw165]

hi @jackdoyle ,

Can you fire some example of how to tell GSAP to add its classes to a different object rather than the global one, by defining a GreenSockGlobals property of the global scope.?

[jackdoyle]

I'm not familiar with Webpack specifically, but I can tell you that in a web page all you have to do is:

var gs = window.GreenSockGlobals = {}; //then load the GSAP file(s). Then: gs.TweenLite.to(...);

Does that help?

[Makio64]

This bug was fix since this time. ( https://github.com/greensock/GreenSock-JS/pull/106 & https://github.com/Makio64/GreenSock-JS/commit/6fbfc74888155765a1d97443139c112f1b9f1892 )

If it can help you, in my webpack config I have this ( I remove the code unrealeted with tweenmax ) :

resolve: { alias: { TweenMax: vendors+"gsap/src/uncompressed/TweenMax.js", } }, plugins: [ new webpack.ProvidePlugin({TweenMax: "TweenMax"}) ]

then in my code i can use now tweenmax / easing wihout any require :

TweenMax.to(position,.8,{y:0,delay:delay,ease:Back.easeOut});

[glebmachine]

Is there any canonical way, like?:

import { TweenMax, Power2, Power3 } from 'TweenMax';

[jackdoyle]

Not that I know of today, no. I'm just not at all familiar with Webpack. Sorry. We do hope to move to an ES6 model at some point, so that should help. But I can't promise any delivery dates yet (it's a lot of work, as you can probably imagine).

[glebmachine]

Yep, it would help.

So this case work correctly now:

import { Power2 } from 'gsap/src/uncompressed/easing/EasePack.js';