Kineticjs 'mouseover' tween is working but 'mouseout' tween is not

Question

I am currently trying to make it so a grid of triangles will expand and move to the 'top' layer when you mouse over them, but then shrink back down to original size and move back to the original layer when you mouse out of them. However right now only the mouse over function is working correctly.

Here is the current code Im working with:

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
  });

  var layer = new Kinetic.Layer();
  var secondLayer = new Kinetic.Layer();


var tri = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 3,
    radius: 30,
    fill: '#111111',
    closed: true,
    shadowColor: '#5febff',
    shadowBlur: 5,
    shadowOpacity: 0.18,
});

  layer.add(tri);

  stage.add(layer);
  stage.add(secondLayer);

  // bind stage handlers
  layer.on('mouseover', function(evt) {
    var shape = evt.targetNode;
    shape.moveTo(secondLayer);
    stage.draw()
    var tween = new Kinetic.Tween({
    node: shape,
    duration: 0.05,
    scaleX: 1.5,
    scaleY: 1.5
    });
    tween.play()
  });

  secondLayer.on('mouseout', function(evt) {
    var shape = evt.targetNode;
    var tween = new Kinetic.Tween({
    node: shape,
    duration: 0.05,
    scaleX: 1.5,
    scaleY: 1.5
    });
    tween.reverse()
    shape.moveTo(layer);
    stage.draw();

  });

And here is a jsfiddle: http://jsfiddle.net/y2C3Z/1/

Answer 1

1. You can use tween.reverse() only after tween.play() . So you can just change scale attributes to original values.

2. Don't move shape between layers while shape under a tween. You can move shape after tween is done.

http://jsfiddle.net/y2C3Z/3/