Making my Canvas Kinetic JS code more efficient. Firefox / Opera Both out of memory

Question

I have a small animation which is executed on a button click. The canvas elements have already been defined. This runs perfectly in Chrome and IE. But Opera throws a Out Of Memory Error.

I have narrowed it down to being this code:

Can anyone give me tips / advise a way of making this code much more efficient. This is my first canvas project so please hold back on insulting me for bad code! :)

//function which runs once the 'play' button is clicked. Animation
function startIntro(){
welcomeLayer.remove();

 setTimeout(function() {
   introLayer.transitionTo({
      y: 0,
      duration: 0.3
    });
  }, 1);

 setTimeout(function() {
   introLayer.transitionTo({
      x: -stageWidth * 2 + 450,
      duration: 15   
    });
  }, 1020);

   setTimeout(function() {
        openJaws();
    }, 1000);

    setTimeout(function(){
        skipIntro.transitionTo({
            y:stageHeight - 40,
            duration:0.9
        });

         skipIntroText.transitionTo({
            y:stageHeight - 43,
            duration: 0.9
        });
    }, 500);

  setTimeout(function() {
        AmberGreenBody.transitionTo({
            x: stageWidth / 12 - 100,
            duration: 1.3,
            easing: 'ease-out'
          });

        AmberGreenArm.transitionTo({
            x: stageWidth / 12  -100,
            duration: 1.3,
            easing: 'ease-out'
          });
   }, 1090);

   setTimeout(function() {
        AmberGreenSpeechBubble.transitionTo({
           duration:0.2,
           scale: {
               x: 1,
               y: 1
           },
         easing: 'ease-out'
        });
    }, 2100);

   setTimeout(function() {
        AmberGreenSpeechBubbleText.transitionTo({
           duration:0.2,
           scale: {
               x: 1,
               y: 1
           },
           easing: 'ease-out'
        });
   }, 2100);

   setTimeout(function() {
        AmberGreenSpeechBubble.transitionTo({
           duration:0.1,
           scale: {
               x: 0,
               y: 0
           },
           easing: 'ease-out'
        });
   }, 6500);

  setTimeout(function() {
        AmberGreenSpeechBubbleText.transitionTo({
           duration:0.2,    
           scale: {
               x: 0,
               y: 0
           },
           easing: 'ease-out'
        });
   }, 6500);

   setTimeout(function() {
        TheConeBody.transitionTo({
            x: stageWidth / 5,
            duration: 2,
            easing: 'ease-out'
          });

           TheConeArm.transitionTo({
            x: stageWidth / 5 -10,
            duration: 2,
            easing: 'ease-out'
          });
  }, 6550);

   setTimeout(function() {
      TheConeSpeechBubble.transitionTo({
           duration:0.2,

     scale: {
         x: 1,
         y: 1
     },
      easing: 'ease-out'
    });
  }, 8900);

   setTimeout(function() {
       TheConeSpeechBubble.transitionTo({
           duration:0.1,
     scale: {
         x: 0,
         y: 0
     },
      easing: 'ease-out'
    });
  }, 12000);


      setTimeout(function() {
       TheConeSpeechBubbleText.transitionTo({
           duration:0.2,

     scale: {
         x: 1,
         y: 1
     },
      easing: 'ease-out'
    });
  }, 8900);   

    setTimeout(function() {
       TheConeSpeechBubbleText.transitionTo({
           duration:0.2,

     scale: {
         x: 0,
         y: 0
     },
      easing: 'ease-out'
       });
  }, 12000);   

  setTimeout(function() {
      AmberGreenSpeechBubbleTwo.transitionTo({
            duration:0.2,
            scale: {
                x: 1,
                y: 1
            },
      easing: 'ease-out'
    });
  }, 13000);

   setTimeout(function() {
       AmberGreenSpeechBubbleTextTwo.transitionTo({
            duration:0.2,
            scale: {
                x: 1,
                y: 1
            },
            easing: 'ease-out'
        });
  }, 13000);

   setTimeout(function() {
       AmberGreenSpeechBubbleTwo.transitionTo({
            duration:0.1,
            scale: {
                x: 0,
                y: 0
            },
            easing: 'ease-out'
        });
  }, 17000);

  setTimeout(function() {
       AmberGreenSpeechBubbleTextTwo.transitionTo({
            duration:0.2,
            scale: {
                x: 0,
                y: 0
            },
             easing: 'ease-out'
        });
  }, 17000);


  setTimeout(function() {
        BlindSpotBody.transitionTo({
            x: stageWidth / 2 + 400,
            duration: 1.5,
            easing: 'ease-out'
          });
  }, 17000);

  setTimeout(function() {
        BlindSpotBubble.transitionTo({
            scale:{
                x: -1,
                y:1
            },
            duration: 0.25,
            easing: 'ease-out'
          });

           BlindSpotText.transitionTo({
            scale:{
                x: 1,
                y:1
            },
            duration: 0.25,
            easing: 'ease-out'
          });
  }, 17500);


setTimeout(function() {
        BlindSpotBubble.transitionTo({
            scale:{
                x: 0,
                y:0
            },
            duration: 0.25,
            easing: 'ease-out'
          });

           BlindSpotText.transitionTo({
            scale:{
                x: 0,
                y:0
            },
            duration: 0.25,
            easing: 'ease-out'
          });
  }, 22500);


    setTimeout(function() {
        BlindSpotBody.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          AmberGreenBody.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          AmberGreenArm.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          TheConeBody.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          TheConeArm.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });
       }, 24000);

    setTimeout(function() {
         gameboardGroup.transitionTo({
             x: 425,
             duration: 15
           });
    }, 1020);

         setTimeout(function() {
         openJaws();

  }, 1000);

 setTimeout(function() {
      scoreGroup.transitionTo({
          y:5,
          duration: 0.5,
          easing:'bounce-ease-out'

      });
  }, 23400);     
}//End of StartIntro Functin

Answer 1

As elite suggested, ditch all of the timeouts. Create a single Animation object with new Kinetic.Animation, and put logic in there that triggeres the different transitions based on the time that has passed.