Jump to content


Amazing Slow Performance when tweening easel:{tint:

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:



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



It completely destroys it!!!


Am I doing it wrong or is this just slow?


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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.