JSFiddle - React, Tailwind, and code Playground
HTML
<div id="info">
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
<h2>10 _ yoyo</h2>
<p>Demonstrating the yoyo() feature.</p>
</div>
<div style="position: absolute; top: 100px; left: 400px; ">
<div id="target1" data-rotation="0" data-y="0" class="box" style="left: 0px; top: 0px">
yoyo with repeat once
</div>
<div id="target2" data-rotation="0" data-y="0" class="box" style="left: 300px; top: 0px">
yoyo with repeat forever
</div>
</div>
CSS
.box {
width: 100px;
height: 100px;
display: block;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
position: absolute;
border: 1px solid black;
font-size: 10px;
padding: 20px;
}
#target1 {
background: #fcc;
}
#target2 {
background: #cfc;
}
JavaScript
var targets = new Array();
init();
animate();
// ###########################################################
function init() {
var target1 = document.getElementById( 'target1' );
var target2 = document.getElementById( 'target2' );
targets.push(target1);
targets.push(target2);
for(var i = 0; i < 2;i++ ){
var tween = new TWEEN.Tween( targets[i].dataset )
.to( { rotation: 360, y: 300 }, 750 )
.easing( TWEEN.Easing.Cubic.InOut )
.onUpdate( function() {
updateBox( targets[i], this );
})
.start();
}
// ###########################################################
}
function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
function updateBox( box, params ) {
var s = box.style,
transform = 'rotate(' + Math.floor( params.rotation ) + 'deg)';
s.webkitTransform = transform;
s.mozTransform = transform;
s.transform = transform;
box.style.top = params.y + 'px';
}