Webpack your Greensocks

[atomboy]

As Webpack is taking over the package manager scene by storm I wonder if there is already a module/submodule managing script developed for GSAP. I know we can hand code this ourself but as a paying user this feels kinda off.

 

Using the premium GSAP package, and for instance module 1 uses TweenLite and CSSPlugin as include/import and module 2 uses TweenMax. They are all included instead of only TweenMax.

 

Is this functionality being delivered or has it already been?

[GreenSock]

Howdy atomboy. Thanks for being a club member! I must admit I'm not terribly familiar with all the build systems, packagers, bundlers, transpilers, etc. available (I know there are MANY), but we've done several things to make GSAP workable in most (if not all) of them. The latest version (1.19.1) can be installed via NPM with "npm install gsap" and then you can:

//typical import
import {TweenMax, Power2, TimelineLite} from "gsap";

//or get to the parts that aren't included inside TweenMax (works as of 1.19.1):
import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

Is that what you're looking for? 

 

Disclaimer: GSAP is not authored in official ES6 modules, but we do hope to move in that direction once we verify there's not too much of a performance tradeoff (I've seen some articles that are a little scary in that regard). It's a big project to rewrite it all in ES6, so it might take some time. Thanks for your patience. 

[OSUblake]

I think @atomboy might be asking about having the TweenMax file split up because some scripts can end up being included twice. If you import the stand alone scripts for TweenLite and the CSSPlugin in one file, and the TweenMax script in another, you'll end up with TweenLite and the CSSPlugin being included twice in the output because they are also included with TweenMax file.

 

If that's the case, it'd be better to just import from "gsap" like Jack showed above.

import {TweenLite, CSSPlugin} from "gsap";

.

[atomboy]

....

import {TweenLite, CSSPlugin} from "gsap";

 

 

This includes the TweenMax file as a whole and adds 50kb of file size. Now this is not the end of the world but not very elegant.

[OSUblake]

Well, didn't you say you were using TweenMax in another file? 

 

Curious, how many plugins/classes in the TweenMax file do you typically use? I like the convenience of TweenMax including all that stuff. If everything were separate, you'd have to do a lot of importing to get the same functionality. It'd be like...

import TweenMax from "gsap/TweenMax"; // imports TweenLite
import TimelineMax from "gsap/TimelineMax"; // imports TimelineLite
import CSSPlugin from "gsap/CSSPlugin";
import AttrPlugin from "gsap/AttrPlugin";
import RoundPropsPlugin from "gsap/RoundPropsPlugin";
import DirectionalRotionalPlugin from "gsap/DirectionalRotionalPlugin";
import BezierPlugin from "gsap/BezierPlugin";
// And then all your eases...

Seems like that might get tedious if you have a lot of modules with animations. 

.

[atomboy]

I make modules which are used in multiple projects/websites (or not).

// Module A -- example size of 50KB -- Requires TweenLite and CSSPlugin
import TweenLite from 'gsap/TweenLite'
import 'gsap/CSSPlugin'


// Module B -- example size of 100KB -- Requires TweenMax
import TweenMax from 'gsap'


// Module C -- example size of 100KB -- Requires TweenLite and CSSPlugin
import { TweenLite, CSSPlugin } from 'gsap'

A website that only includes module A is happy because it's only 50KB.

 

A website that only includes module B is happy because it's only 100KB.

 

A website that only includes module C is unhappy because it could be 50KB instead of 100KB.

 

A website that includes both module A and B is unhappy because together they could be 100KB instead of 150KB.

 

 

In an ideal situation 

• Module A is imported like Module C and is for example only 50KB instead of 100KB.
• Greensock modules are deduped when TweenMax is bundled and one of it's included submodules is imported elsewhere.
• A module with depedencies (correct me if i'm wrong) like jquery.gsap.js, should automatically check for missing dependencies and import them.

An 2.0 situation

The 'lodash-webpack-plugin' looks for used functions/submodules in your code and only includes those automatically. This can be made in the form of a Webpack specific plugin but as I'm a big fan of Webpack; totally awesome!

[GreenSock]

Just curious - those kb weights are uncompressed, right? It was jut a little confusing because TweenMax is less than 40kb.

 

Anyway, yes, we're moving toward building stuff in ES6 to better accommodate situations like this. If you've got specific suggestions for how we could do more of a band-aid fix in the mean time with the current codebase, please let us know. (Like a pull request)

[atomboy]

I made a rough estimation in KiloBytes not gzipped.

TweenMax 110KB. TweenLite 27KB.  CSSPlugin 41KB.  Minified state as shipped no gzip.