GSAP and Sage 9 (beta 3)

sage
1

Hey everyone,

Glad to be back and working on new Sage development again! So many Sage 8 sites out there looking forward to the first 9.

Anyways, first hurdle. Including gsap as a import using Webpack and Yarn.

I’ve added gsap as a dependency and thats worked just fine.

Imported it via
import 'gsap/src/uncompressed/TweenMax';

But alas when I try and use any of the function contained inside TweenMax
var tl = new TimelineMax({paused:true});

I get an error for
error 'TimelineMax' is not defined no-undef

I fear my Webpack experience is at fault but wondered if anyone else was having similar issues with imports?

2

I think you should add the following:

"TweenLite": path.resolve('node_modules', 'gsap/src/minified/TweenLite.min.js'),
      "TweenMax": path.resolve('node_modules', 'gsap/src/minified/TweenMax.min.js'),
      "TimelineLite": path.resolve('node_modules', 'gsap/src/minified/TimelineLite.min.js'),
      "TimelineMax": path.resolve('node_modules', 'gsap/src/minified/TimelineMax.min.js'),
      ```
To your `alias` section in your `webpack.config.js`
Hope it helps!
3

Also, sorry, I just realised that you didn’t import TimelineMax anywhere, reason why you’re getting that error.
You simply have to use import { TimelineMax } From 'gsap', and you should be good to go!

4

Hi! Does this work to anyone?
First I did yarn add gsap

And then in resources/…/main.js I added:
import { TweenMax, TimelineMax } from “gsap”;

And in resources/…/webpack.config.js:
resolve: {
modules: [
…
],
alias: {
“TweenLite”: path.resolve(‘node_modules’, ‘gsap/src/minified/TweenLite.min.js’),
“TweenMax”: path.resolve(‘node_modules’, ‘gsap/src/minified/TweenMax.min.js’),
“TimelineLite”: path.resolve(‘node_modules’, ‘gsap/src/minified/TimelineLite.min.js’),
“TimelineMax”: path.resolve(‘node_modules’, ‘gsap/src/minified/TimelineMax.min.js’),
},
.
And this is not working. It gives back the following error:
3:10 error ‘TweenMax’ is defined but never used no-unused-vars
3:20 error ‘TimelineMax’ is defined but never used no-unused-vars

[EDIT]
If I make the import in the same file where I’m using the function, it works.
[/EDIT]

I’m using Trellis - Bedrock and Sage 9. How do we include packages here?

Thanks,

5

What you did is correct. The error you’re getting is an ESLint error. The reason is that if you import a library but don’t use it, you’ll end up increasing the size of your bundle for no reason. If you’re just testing though, you can avoid the error by instructing eslint to skip that like with // eslint-disable-line
Hope it helps! :slight_smile:

6

Great! Eventually I discover myself the way this works. Its my first time with SAGE 9 :slight_smile: .
I’m having troubles now to connect dependencies from GSAP. For instance, easings.

For instance I have the following very simple animation:

import { TimelineMax } from "gsap";

var target = $('#thisa');

var LoadThis = new TimelineMax({ paused: true }),
tlhome = new TimelineMax();

tlhome.from( target , 2 , { left: 1000 , ease: Expo.easeOut })

LoadThis.add([tlhome]);

window.onload = function () {
  LoadThis.play();
}

But it is not recognizing the Expo.easeOut and of course is giving me the error “Expo is not defined”.
I tried to import EasePack:

import { TimelineMax, EasePack } from "gsap";

And including in in _resources/…/webpack.config.js: like this:

...
"EasePack": path.resolve('node_modules', 'gsap/src/minified/easing/EasePack.min.js'),
...

Do I have to do anything else?

Thanks

EDIT: I guess I was doing everything right. I change for a more pronounced easing and I could see that was working. I will leave this here anyway in case some newbie like me encounters the same problem.

1 Like
7

The easing lives in a separate package that you have to manually import the same way you did for TimelineMax itself. So your import will become import { TimelineMax, Expo } from 'gsap' or whichever else easing library you want to use :slight_smile: I don’t think there’s the need for that additional alias you added to your webpack.config!

2 Likes