Consecutive tweens Keneticjs 5.1.0

Question

Ok, solved. Place the tween in the click function.

http://jsfiddle.net/2GLF4/2/

  star.on('click', function() {

    Spin60 = new Kinetic.Tween({
        node: star,
        rotationDeg: star.rotation()+60,
        duration: 1,
        easing: Kinetic.Easings.EaseInOut,
        onFinish: function() {  
            console.log(star.rotation());
        }
    }).play(); 

  });

I am attempting to rotate the star element with Kinetic.Tween using an on click event. The first tween works but consecutive clicks do not. Is this my error, the limitation of the function, or should i be using Kinetic.Animation instead?

http://jsfiddle.net/2GLF4/

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

var layer = new Kinetic.Layer();

var star = new Kinetic.Star({
    x: stage.width() / 2,
    y: stage.height() / 2,
    numPoints: 17,
    innerRadius: 30,
    outerRadius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,

});

star.on('click', function () {
    Spin60.play();
});

layer.add(star);
stage.add(layer);


console.log(star.rotation());


var Spin60 = new Kinetic.Tween({
    node: star,
    rotation: +60,
    duration: 3,
    easing: Kinetic.Easings.EaseInOut,
    onFinish: function () {
        console.log(star.rotation());
    }
});

Answer 1

You can use supply a callback function to the tween's .finish event.

The callback is fired when the tween is complete.

myTween.finish(callback)