Tween.js v1

Single repeating animation

by trolleymusic

HTML

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

CSS

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

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 }
}

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

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

animate();