TweenMax systemjs

[Johan Rabie]

When i started with systemjs i had difficult understanding how be best introduce non packed libraries like greensock to my ES6 application. I also have a paid for subscription so the JSPM install will not work for me as it is and could not get it installed using jspm install greensock anyway.

 

I figured out a really simple way of doing this and hope it might be useful to some of you.

 

1. Configure config.js 

in paths define where library folder is (shorthand your mapping...)

"lib:*": "library/*"

under map add a named item to where your greensock dependency is at.

"TweenMax": "lib:greensock/TweenMax.min"

2. use it in your es6 file by importing it.

import 'TweenMax';

3. animate

    play(rect, color) {
        return new Promise(function(resolve) {            
            this.setLocation(rect, color).then(() => {
                let animationDetails = {
                    attr: {
                        opacity: 0,
                        r: this.animationRadius
                    },
                    onComplete: resolve
                };
                
                this.tween = window.TweenMax.to(this.circle, 0.5, animationDetails);                
            });
        }.bind(this));        
    }

[Carl]

Thanks for sharing your solution. Hopefully it will help others in a similar situation.

[radiator]

This is a better answer than my workaround posted here: http://greensock.com/forums/topic/13610-club-greensock-plugins-package-dependency-management/

 

When I was using shims, as mentioned in my post, I did eventually run into some dependency errors with plugins. JSPM kept giving me a hard time with plugins dependencies - paths were all jacked up, even though shims seemed to spec. 

 

My setup is slightly different than OPs so adding to his very helpful post because this solution helped me out a lot.

 

I keep my GreenSock Club files in a private repo, and I keep that updated as new releases come out. I install it with jspm like any other private github repo.

jspm install gsap=github:username:pass@githubuser/repo

What I was doing was shimming like crazy, but I found I had to go into the jspm generated GreenSock-JS@1.X.0 folder and export additional modules to get some plugins to work. Since I was messing around in the jspm_packages folder exporting the plugins I needed, it wasn't a reproducible install - as any jspm install or jspm update would overwrite that.

 

Using map in JSPM's config.js is a much better solution, as per spec that should be checked into version control. No need to touch package.json, just install normally.

 

Here is an example that worked for me, just like above:

 

config.js:

// Nothing new here, because using my gsap install from github
paths: {
  "github:*": "jspm_packages/github/*",
  "npm:*": "jspm_packages/npm/*"
},

// Add full paths to the map using the github alias
map: {
  "TweenMax": "github:username/GreenSock-JS@1.19.0/src/uncompressed/TweenMax",
  "TimelineMax": "github:username/GreenSock-JS@1.19.0/src/uncompressed/TimelineMax"
  "ScrollToPlugin": "github:username/GreenSock-JS@1.19.0/src/uncompressed/plugins/ScrollToPlugin",
  "MorphSVGPlugin": "github:username/GreenSock-JS@1.19.0/src/uncompressed/plugins/MorphSVGPlugin",
  ...more stuff
}

// Of course don't add comments to your config.js file, for notation only

And then BOOM! 

import 'TweenMax';
import 'ScrollToPlugin';

$backToTop.on('click touchend', function(){
  TweenMax.to(window, 0.2, {scrollTo:{y:0} } );
});

 

 

This works as of greensock v1.19.0 and JSPM 0.16.34

 

Thanks @Johan for the insight to use maps instead of shims and hacky shams