Amazing Slow Performance when tweening easel:{tint:

[antoniobrandao]

As a Flash Developer coming into Canvas, I'm loving GSAP.

 

But I was amazed how slow it was just tweening the color of a EaselJS object.

 

Experiment tweening alpha and scale:

http://antoniobrandao.com/canvas/

 

Experiment like the above, but also tweening the "tint" of an easelJS Shape

http://antoniobranda...vas/index2.html

 

It completely destroys it!!!

 

Am I doing it wrong or is this just slow?

 

Check the source code in the experiments. Any help appreciated!

[GreenSock]

I believe the issue is with EaselJS and the way it applies its "ColorFilter" to objects. A ColorFilter is required in order to get the tint effect you're talking about. I assume it's related to a process under the hood where EaselJS has to calculate how the filter affects all the object's pixels. One thing to note is that in order for the ColorFilter to work, the object's updateCache() method has to get called (on every frame render). Again, that has nothing to do with TweenLite or GSAP - it's just how EaselJS works currently.

 

Make more sense now?

[antoniobrandao]

Makes more sense, but I still can't make it.. Do you have any documentation explaining how to effectively use the EaselJS plugin for animation?

[GreenSock]

Sure, the docs for the EaselPlugin are at http://api.greensock.com/js/com/greensock/plugins/EaselPlugin.html