Tween.js v2

Chained animations

HTML

<script src="https://raw.github.com/sole/tween.js/master/src/Tween.js"></script>
<script src="https://raw.github.com/sole/tween.js/master/examples/js/RequestAnimationFrame.js"></script>
<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    background: green;
}

JavaScript

var element = document.getElementsByClassName('box')[0];

var update = function (state) {
    console.log(state);
    var trans = "rotate(" + state.rotate + "deg)";
    element.style.webkitTransform = trans;
}

var animate = function () {
    requestAnimationFrame(animate);
    TWEEN.update();
}

var loop = [{
    from : { rotate : 0 },
    to : { rotate : 145 }
},{
    from : { rotate : 145 },
    to : { rotate : 0 }
}];

var tween = new TWEEN.Tween(loop[0].from)
.to(loop[0].to, 4000)
.onUpdate(function () {
    update(this);
});

var tweenTwo = new TWEEN.Tween(loop[1].from)
.to(loop[1].to, 4000)
.onUpdate(function () {
    update(this);
});

tween.chain(tweenTwo);
tweenTwo.chain(tween);

setTimeout(function () { tween.start() }, 3000);

animate();