KineticJS Conditional Tweens (Event-Based)

http://stackoverflow.com/q/24768450/1093087

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
<div id="stage-container">
  canvas goes here!
</div>

CSS

body { background-color: black; color: white; }
#stage-container { width:250px; background-color: white; }

JavaScript

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

var layer = new Kinetic.Layer();

var rectangle = new Kinetic.Rect ({
    x: 50, y: 50,
    width: 100, height: 100,
    fillRed: 0, fillGreen: 0, fillBlue: 255,
    draggable: true,
    name: 'rectangle'
});
layer.add(rectangle);

var rectTweenFail = new Kinetic.Tween ({
    node: rectangle,
    duration: 5,
    easing: Kinetic.Easings.Linear,
    fillRed: 255, fillGreen: 0, fillBlue: 0,
});

var rectTweenPass = new Kinetic.Tween ({
    node: rectangle,
    duration: 5,
    easing: Kinetic.Easings.Linear,
    fillRed: 0, fillGreen: 255, fillBlue: 0,
});

layer.find('.rectangle').on('dragstart dragend', function(evt) {
    if ( evt.type == 'dragstart' ) {
        console.log('pass');
        rectTweenPass.play();
    }
    else {
        console.log('fail');
        rectTweenFail.play();
    }
});

stage.add(layer);
layer.draw();