EaselJS how does it work

[nene]

Believe me, I have followed all the instructions from http://www.greensock.com/get-started-js/#, but I can not put this plugin to work. 

 

I add .js files as indicated, but the console always sends me this message: TypeError: window.createjs is undefined

 

My code:

 

<script type="text/javascript" src="src/minified/plugins/EaselPlugin.min.js"></script>

...

<script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script>

<script type="text/javascript" src="src/minified/jquery.gsap.min.js"></script>

<script type="text/javascript" src="src/minified/TweenMax.min.js"></script>

 

And a little example:

var box6 = $('#box-6');

TweenMax.to(box6, .3, {easel:{tint:"#0000FF", tintAmount:1}, delay:1});

 

Others plugins work great, like bezier, css etc, only by adding its libraries, but not with this one. What I am doing wrong?

 

Thank u

[Rodrigo]

Hi,

 

This could be because the order in which the plugin is being loaded. Perhaps add the Easel plugin script tag after the TweenMax.min,js one:

<script src="src/minified/TweenMax.min.js"></script>
<script src="src/minified/EaselPlugin.min.js"></script>
<script src="src/minified/jquery.gsap.js"></script>

Finally you don't need to add the ease pack if you're including TweenMax, it's already included, as well as the CSS Plugin, RoundProps, Bezier Plugin, Attr plugin and Directional Rotation.

 

Rodrigo.

[Carl]

To add a little more light, it doesn't appear that you are using EaselJS.

 

EaselJS is a 3rd party library created by the createJS team (SoundJS, TweenJS, PreloadJS).

It provides a very clean API for working with the HTML5 canvas. It makes it easy to create graphics, add interactivity and a number of other things to your canvas projects. Read more about EaselJS here: http://www.createjs.com/#!/EaselJS

 

Our EaselPlugin was created specifically to work with EaselJS objects and mostly assist in animating color transforms (docs)

 

--

 

Right now it appears you are using the EaselPlugin to change the tint of DOM elements, which isn't going to work. There really isn't any way to reliably tint a DOM element (in a wide range of browsers) at this time. 

 

Hopefully this helps clear some things up.

[jamiejefferson]

Also, window.createjs is not part of GSAP - it's defined by EaselJS. It sounds like you don't have an EaselJS project so you would need to convert your project to use that before you can start tinting things. Tweening easel: { tint } will not work on standard DOM elements.

 

 

 

 

... too slow