KineticJS tween doesn't run when mouseover is within stage

Question

I have setup 3 shapes within a layer and added that to the stage. Those 3 shapes all have a mouseover/mouseenter event listening. And when that fires some of their properties animate.

When the mouseover is happening from outside the stage it works great, but when hovering over each shape from one to the other, the event fires but there is no tween.

I have added stage.draw(); and layer.draw(); but nothing.

here is a codepen example: http://codepen.io/netgfx/pen/JDBIc

Notice that when hovering over the shapes in the console.log the messages appear correct but the tween just doesn't fire...

Answer 1

First thing I see as a problem is that you aren't controlling the order your images are being added to the stage/layer. Because of this, each image could finish loading at a different time and added to the stage/layer at a different time.

You could fix this problem 2 ways:

1. Order your images onload by doing something similar to:

   var img1 = new Image();
   img1.onload = function() { //Load first image
     //Create 1st Kinetic Object
     var img2 = new Image();
     img2.onload = function() { //Load second image after first image has been loaded
       //Create 2nd Kinetic Object
       var img3 = new Image();
       img3.onload = function() { //Load third image after 2nd image is loaded
         //Create 3rd Kinetic Object
       }
     }
   }
   

2. Use zIndex on your 3 shapes that you are tweening, see the docs for zIndex. (Note that the function is spelled zIndex while the object property is spelled zindex

The second problem (your question) is that 2 tweens are being called at the same time, but only 1 of them is being fired. I believe the order goes like this:

1. Middle Mouseout fires tween.
2. Left or Right Mouseenter fires tween right after, which never happens because of the mouseout tween

Instead of creating a tween everytime you mouseenter and mouseout and destroying them onFinish, why not create the tweens once and .play() them on mouseenter, and call .reverse() on mouseout. By doing this you are saving the amount of tweens you need, and preventing the conflict between playing tweens that affect the same nodes.