How to access easings / TimelineMax from NPM package (or from TweenMax)?

[pakastin]

The NPM package exports TweenMax directly – how can I access TimelineMax, easings, etc inside TweenMax?

Now it is like: var TweenMax = require('gsap') var TimelineMax = ??? var Linear = ??? var Power1 = ???

Should it be more like this:

var TweenMax = require('gsap').TweenMax var TimelineMax = require('gsap').TimelineMax var ease = require('gsap').ease var Linear = ease.Linear var Power1 = ease.Power1 ...

I know that I can access for example require('gsap/uncompressed/easing/EasePack') and require('gsap/uncompressed/TimelineMax') but then those packages are included multiple times and the produced Javascript file gets really large without any good reason..

[jackdoyle]

Yes, the current file structure isn't perfectly ideal for that type of development and we plan to reorganize but that will take some time. Meanwhile, you can still reference all of those objects/classes in the global namespace, so for example once you load/define TweenLite or TweenMax, you can simply reference Power1.easeOut or Power3.easeInOut or whatever. Does that answer your question?

[pakastin]

Ok, so I can use TweenMax and easings. That's fine for now, thanks! I can imagine it's hard to restructure for the CommonJS style.

[jackdoyle]

By the way, I didn't mean to say that eases are the only other classes that are available that way - if you load TweenMax, for example, you get all the standard eases as well as CSSPlugin, BezierPlugin, TweenLite, TimelineLite, and TimelineMax that are all globally available thereafter.

[cmalven]

This is hopefully being worked on, just wanted to throw out a +1 for this.

Our development, and much javascript development across the board, is moving toward using npm in combination with tools like Browserify and Webpack to use either CommonJS (var thing = require('stuff')) or ES6 import thing from 'stuff' modules in the browser.

In situations where we don't need whole whole TweenMax kitchen sink (which is the majority of the time) using Greensock through npm isn't as nice as it could be.

Ideally we could do the following:

var TweenLite = require('gsap').TweenLite;
var Draggable = require('gsap').Draggable;
require('gsap').CSSPlugin;

Alternatively, it'd be neat to break each into its own npm module, similar to lodash:

npm install gsap-tweenlite
npm install gsap-draggable`

var TweenLite = require('gsap-tweenlite');
var Draggable = require('gsap-draggable');

Either of these would simplify our npm-centric development with Greensock. Again, I know this is something you're thinking about, just wanted to throw in my "vote" for this work. If there is a better place for vote for things like this please let me know!

[jackdoyle]

Yeah, I totally hear you and we're hoping to head that direction. Just a matter of time (I wish I had more of that!) Gotta learn the ins and outs of that type of system. If anyone has good learning resources, let me know. I don't want to run into a situation where it adds a bunch of extra scaffolding code to the deploy files.

[ghost]

Hi everyone, What is the current state of this ? Wether it is fixed or not, as more and more people are moving to ES6 I think it would be good to have this written somewhere on the official website. Thank you, Alvin

[jackdoyle]

Status is the same - it's in progress but it will likely take a while to revamp fully. At this point the goal is to use ES6 and probably release a 2.x when ready, so it'll have a bunch of other tweaks too (which is why it's going to take more time). For example, we'll likely remove the legacy IE8 compatibility code to streamline things more and because almost nobody uses IE8 anymore. Thanks for your patience!

[TheBolmanator]

+1 You have my utmost confidence, but I am looking forward to this release.

[matthewjumpsoffbuildings]

whats the status of this? im using npm and im unsure how to correctly require() the scrollTo plugin

[pakastin]

I don't know – I gave up hope and wrote my own little tween helper: https://github.com/pakastin/animationframes :)

[jackdoyle]

@matthewjumpsoffbuildings There are instructions on the main screen (Readme) - it should be pretty simple now:

import ScrollToPlugin from "gsap/ScrollToPlugin";

Just make sure you've got the latest version.

Does that help?

[matthewjumpsoffbuildings]

thanks @jackdoyle - just before i saw your message i realised i could do require('gsap/ScrollToPlugin') and that worked too :)

(well at least with my webpack 2.2 + babel setup)

[pakastin]

Oh, I didn't realize this is fixed already! 🤘