Jump to content


Animating multiple createJS shapes with tweens drops FPS

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

Hey there forums! recently jumped into using TweenLite and really like its simplicity. All though when I try to tween between 40-60 CreateJS shapes at once my fps drop by 1 thrid. 


Here is what I have got. The tweenInStar gets called 3 times simultaneously. and draws a whole bunch of particles and shapes (The particles are handled by raw canvas code and dont affect the fps). The moment it gets to the " TweenLite.to(largeSparkle,.8, {easel:{rotation: 270 }});" My fps takes the hit.




function tweenInStar(star, starX, starY , particleCount){
        var shape = starsShapes[star];
             buildSparkles(star, starX  - 58,shape.y - 20, random(20,40));
            sparkleArrayFilled[star] = true;
          TweenLite.to(shape,.2, {easel:{scaleX: 0.9,
                    scaleY: 0.9,
                    alpha: 1.0},onComplete:function(){
                        fireworks.push( new Firework( starX, starY , starIndex, particleCount) );
                        var largeSparkle = createSparkle(starX , shape.y - 10, 80, 40);
                      TweenLite.to(largeSparkle,.8, {easel:{rotation: 270 }});
                        TweenLite.to(largeSparkle,.4, {easel:{scaleX: 1, scaleY: 1 ,alpha: 0.8 }});
                        TweenLite.to(largeSparkle,.4, {easel:{scaleX: 0, scaleY: 0 ,alpha: 0 }, delay:.4});
                       TweenLite.to(shape,.15, { easel:{exposure:1.25}, onComplete: complete});
            function complete(){
                TweenLite.to(shape,.15, { easel:{exposure:1}});
    var sparkleArrayFilled = [false, false, false];
    var sparklesArray = [[],[],[]];
    function buildSparkles(star, x, y, scale){
        var i  = Math.floor(random(5,15));
            sparklesArray[star].push(createSparkle((x + random(15, 100)), (y + random(-20,               60)), Math.floor(random(10,30))), 20);
    function drawSparkles(sparkles){
         for(var j = 0; j < sparkles.length; j++){
             var shape = sparkles[j];
            TweenLite.to(shape,.8, {easel:{rotation: 270 }, onComplete:resetRotate()});
             TweenLite.to(shape,.4, {easel:{scaleX: 1, scaleY: 1 ,alpha: 0.8 }});
             TweenLite.to(shape,.4, {easel:{scaleX: 0, scaleY: 0 ,alpha: 0 }, delay:.4});
            function resetRotate(){
                shape.rotation = 0;
    function createSparkle(x, y, scale, shadowBlur){
        var sparkle = new createjs.Shape();
         //sparkle.shadow = new createjs.Shadow("#fff", 0, 0, shadowBlur);
         sparkle.graphics.beginFill("#fff").drawPolyStar(x , y, scale, 4, 0.87, -90);
            sparkle.x = x;
            sparkle.y = y;
            sparkle.regX = x ;
            sparkle.regY = y ;
            sparkle.scaleX = 0;
            sparkle.scaleY = 0;
            sparkle.alpha = 0;
     //   sparkle.cache(-x, -y, 200, 200);
        return sparkle;
Would be eternally greatful for any help
Link to comment
Share on other sites

Hi, and welcome to the forums. Can you please read this and create a demo so we can jump straight into helping you.


Also it would help to have some information about the environment in which you think performance is an issue. My gut says you're just asking too much of the browser and it can't render fast enough, but that's always going to be browser and hardware dependent. In 99% of cases, performance issues are caused by the speed a browser can render each frame of the scene, and not the GSAP code driving the animation.

  • Like 4
Link to comment
Share on other sites

Yes, Jamie is exactly right. In addition I recall (although I can't find it now) that the easelJS folks mentioned that certain filter operations like colorMatrixFilter (which our plugin taps into for exposure) can be very CPU intensive. So if you are doing lots of exposure tweens on many items that could be part of the issue. 


Again, this ties into Jamie's suggestion that it comes down to CPU load caused by rendering issues and not the calculations performed by GSAP. 


Let us know when you have a demo created that we can look at.

Link to comment
Share on other sites

I would like to make a code pen but there's allot of code and dependencies there and cant seem to add extra CDN for Easel JS (plus I'm currently testing my project locally). .


Carl you were spot of with the exposure. I removed the tween for the exposure on the Easel bitmap and it ran allot more smoothly (Only dropped 2  frames). I will now just have to find new way to shine my image. 


By the way You guys have amazing support and quick response time! thank you so much.

  • Like 1
Link to comment
Share on other sites

Using the tint in the ColorPropsPlugin drops my FPS too. I think my alternatives are to draw in a new/brighter image over top then fade it in and out to simulate the shine or set the exposure in one frame then set it back after the delay. 

Link to comment
Share on other sites

Actually Carl came up with an incredibly simple way of doing the shine effect, check it out:


See the Pen gLJvz by GreenSock (@GreenSock) on CodePen


Perhaps that could help your project.



  • Like 1
Link to comment
Share on other sites

Thanks for the link rhernando, though not quite what I was looking for, allthough it is a really cool effect.

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.