Jump to content


Gsap & EaselJs Canvas animations Performance Issue

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

I try to animate a lot of canvas shapes created with Easeljs and animate with timelineMax. The animation is too slow, the demo is here  .
I think I do something wrong but I do no what.

Any suggestion?

See the Pen jyKPqy by nicmitch (@nicmitch) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Very sorry to hear you are having problems.

Unfortunately your demo is crashing my browser.

I can barely scroll through the code to read it. I saw some code related to tweening color filter properties. Those can be very processor intensive. Maybe try removing those and doing a simpler modification like x or y. If that works better at least we can narrow it down to the color tweens. If that doesn't help you may just need to reduce the number of items.


GSAP's performance is extremely fast. It can process thousands of tweens without missing a beat. 99% of the time slow downs are caused by browser rendering.


Pixi.js offers a very fast renderer. Click on this demo a few times to generate hundreds of smiley's animated with GSAP: http://codepen.io/osublake/pen/vNwRdO


Just providing that to show that GSAP has no problem doing many things at once.


My gut feeling is that EaselJS is not as fast especially with the color filters. 

Sorry I can't be of more help. I'm not terribly familiar with the EaselJS API. If you can get your demo to be a bit more stable perhaps we can take another shot. Might be worthwhile to post in the Easel forums as well. 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Whoa. This certainly is a phat one. I can open it but I cannot for the life of me work out what is going on. What effect is it that you are trying to achieve. As Carl said, there are very fast renderers out there that might already have a solution for you.

Link to comment
Share on other sites

Looks like the codepen is now returning 404.

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.