Update 1.18.5 > 1.19.0 breaks imports

[nirazul]

When using gsap in conjunction with webpack and es6 imports, like this, everything worked fine:

import TimelineMax from 'gsap/src/uncompressed/TimelineMax';

After the update to 1.19, imports break with a webpack message that the modules were not found. There seems to be a breaking change in the import handling.

In addition: There's no way we could get the ScrollToPlugin to work with TweenMax. The problem is always a seemingly missing dependency of TweenLite in the plugin.:

Before:

import TweenLite from 'gsap/src/uncompressed/TweenLite';
import 'gsap/src/uncompressed/plugins/ScrollToPlugin';

After (not working):

import { ScrollToPlugin, TweenLite } from 'gsap';

[jackdoyle]

Sorry about any confusion there, but we had to revert to referencing "TweenLite" for AMD instead of "./TweenLite" for better compatibility with systems like RequireJS but it should be pretty easy to solve the issue you ran into...

I'm no Webpack expert, but I believe you can set up your webpack config file to resolve things like:

resolve: {
  root: path.resolve(__dirname),
  extensions: ['', '.js'],
  alias: {
    "TweenLite": "gsap/src/uncompressed/TweenLite"
  }
}

For any of the classes that are included in TweenMax like all of the eases, TweenLite, TimelineLite, TimelineMax, etc. (this doesn't include ScrollToPlugin), you can just install gsap from NPM and then

import { TweenLite, TimelineMax, Elastic, Power2 } from 'gsap';

Does that help at all?

[nirazul]

Thanks for clearing things up.

How would I import the ScrollToPlugin then? The plugin has a dependency to TweenLite. I'd really like to avoid indirectly requiring TweenLite when I already have TweenMax in my project.

To my understanding, both TweenMax and TweenLite would be imported at the same time, as they are two physically different files.

[jackdoyle]

You can still load ScrollToPlugin and it'll empower the engine to recognize scrollTo values (and behave properly). You just cannot reference the class itself because the global flag isn't set to true. I can change that in the next release. Or you can do it yourself manually, by adding global:true around line 73 of ScrollToPlugin, like:

propName: "scrollTo",
API: 2,
global:true, //<-- add this!
...

But again, that's not necessary for scrolling tweens to actually work. The only thing that change should allow is referencing the ScrollToPlugin class itself in your code.

[nirazul]

Thanks again for helping me out. Could you please verify which method of importing works with the ScrollToPlugin?

In our configuration, this line always throws a webpack error as the path ../TweenLite.js is not found.

[jackdoyle]

Did you make that "global:true" change I suggested above? And you are using 1.19.0, right?

I just tested with Webpack and this seemed to work fine:

import ScrollToPlugin from "./libs/gsap/plugins/ScrollToPlugin";

[danehansen]

possibly related to this issue, i have found:

import { TweenLite, CSSPlugin, ScrollToPlugin } from 'gsap'

//this works:
TweenLite.to(element, 1, {x: 100})

//this throws an error:
TweenLite.to(window, 1, {scrollTo: {y: 0}})

and the error thrown is Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present.

should also note that my config file here contains:

alias: {
  'TweenLite': 'gsap/src/uncompressed/TweenLite',
  'CSSPlugin': 'gsap/src/uncompressed/plugins/CSSPlugin',
  'ScrollToPlugin': 'gsap/src/uncompressed/plugins/ScrollToPlugin'
},

[jackdoyle]

@danehansen That's expected behavior - ScrollToPlugin is not inside TweenMax. Only the classes that are in TweenMax are exported (remember, "gsap" just points to the TweenMax file). In the future, we're aiming at a complete re-structuring of things for even better ES6 conformity, but that's not a trivial task. Please give us some time :)

If you want to use ScrollToPlugin, you can use the other syntax that imports that file from a path, as described above.

[danehansen]

ah gotcha. i think i missed that part. so then ScrollToPlugin should still have its alias set and import as import ScrollToPlugin from 'ScrollToPlugin'?

[jackdoyle]

@danehansen yeah, I guess if you've got that alias set up, that should indeed work.

[gaearon]

You probably already know this but I wanted to note that asking people to change Webpack configuration for the sake of a single library is still problematic in many scenarios. For example, tools like Create React App don't support configuring Webpack at all, but use it internally. This means its users can't fix those issues with GSAP.

[fregante]

As an update to this:

GSAP 1.19.1 and up works without aliases

... and without any custom webpack config. This the correct code:

import TweenMax from 'gsap';

// or separately:
import TweenLite from 'gsap/TweenLite';
import CSSPlugin from 'gsap/CSSPlugin';
import TimelineLite from 'gsap/TimelineLite';

Or this:

import {TweenMax, TimelineMax, Back, Quad} from 'gsap';

But not every module can be imported in a single import; for example you have to use this for Draggable:

import Draggable from 'gsap/Draggable';

[gaearon]

Awesome!

[zerostyle]

Welcome to the future gsap!

[danehansen]

It looks like some eases we get from EasePack like this: import { Back, Bounce, Circ, Elastic, Expo, Sine } from 'gsap/EasePack but all the Greensock eases appear to come in as empty functions. Also EasePack itself logs out as a reference to the window? How do we get a reference to Cubic, Linear, Power{x}, Quad, Quart, Quint, and Strong? Is there a way we can reference them all consistently? Big improvement overall!

[fregante]

I'm not sure if EasePack exports those modules (it looks like it doesn't) but if you're using TweenMax you can import them from gsap itself:

import { TweenMax, Back, Bounce, Circ, Elastic, Expo, Sine } from 'gsap';

[jackdoyle]

That's exactly right. EasePack itself doesn't export those directly (it relies on some plumbing in the core TweenLite/Max), but TweenMax does.

[danehansen]

import { TweenMax, Cubic, Linear } from 'gsap'; results in all undefined values. How do we get to these other eases? It would be nice to have access to them without having to import TweenMax if that is the case.

[jackdoyle]

Hm, can anyone else reproduce this? @danehansen can you give us a little more insight into your setup/environment? You're using 1.19.1, right? And do you have aliases for any of the GSAP stuff? Cleared any caching?

[danehansen]

Definitely 1.19.1 and no aliasing whatsoever. I'm on someone else's environment but I know its webpack. What else do you want to know about the environment? I tried again in a simplified personal environment and get a value for TweenMax and empty functions for Linear and Cubic.

[peterugh]

To add to @danehansen above, I was able to get empty functions for Linear and Cubic as well as undefined, but never the correct function. Also, the rest of the functions in bfred-it's example log to console correctly, or as undefined at certain times. It appears to go undefined after HMC does some of its magic but not every time, and not only under that scenario.

[fregante]

Can you post your whole webpack config on hastebin.com?

[danehansen]

https://hastebin.com/makusiwoso.js

[jackdoyle]

Any chance you could create a reduced test case please?

[manudurgoni]

@danehansen Do you have this kind of script in your html ?

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

I had the same issue that you and after removed this forgotten line from my index.html, it works !

[peterugh]

I can't answer for @danehansen but I am having similar issues and definitely don't have the CDN version included in my HTML.

[peterugh]

My webpack config for those interested

https://hastebin.com/mudaliqacu.js