JSFiddle - React, Tailwind, and code Playground

by projeqht

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<div id="container"></div>
<div id="buttons">
    <input type="button" id="play" value="Play" />
    <input type="button" id="reverse" value="Reverse" />
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#buttons {
    position: absolute;
    top: 5px;
    left: 10px;
}
#buttons > input {
    padding: 10px;
    display: inline-block;
    margin-right: 5px;
}

JavaScript

//http://stackoverflow.com/questions/17931871/applied-tween-inside-each-how-do-i-use-reverse

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 300
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
    x: 200,
    y: 130,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2
});

var rect2 = new Kinetic.Rect({
    x: 150,
    y: 200,
    width: 100,
    height: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 2
});

var rect3 = new Kinetic.Rect({
    x: 250,
    y: 70,
    width: 100,
    height: 50,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 2
});

layer.add(rect);
layer.add(rect2);
layer.add(rect3);
stage.add(layer);

elements = stage.get('Rect');
var tweenArray = [];

elements.each(function (element) {
    var tween = new Kinetic.Tween({
        node: element,
        rotationDeg: 180
    });
    tweenArray.push(tween);
});

// reverse tween
document.getElementById('reverse').addEventListener('click', function () {
    for (var i = 0; i < tweenArray.length; i++) {
        tweenArray[i].reverse();
    }
}, false);

// play tween forward
document.getElementById('play').addEventListener('click', function () {
    for (var i = 0; i < tweenArray.length; i++) {
        tweenArray[i].play();
    }
}, false);