Skip to content

Instantly share code, notes, and snippets.

@roseforyou

roseforyou/jsbin.nequsuno.html

Created May 27, 2014 07:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roseforyou/946fe1c9c083c92a184f to your computer and use it in GitHub Desktop.
Save roseforyou/946fe1c9c083c92a184f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.nequsuno.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://sole.github.io/tween.js/build/tween.min.js"></script>
<script src="http://sole.github.io/tween.js/examples/js/RequestAnimationFrame.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
#target {
width:30px;
height: 30px;
background-color: red;
position: absolute;
top: 300px;
left: 100px;
}
</style>
<body>
<div id="target"></div>
<script>
var position;
var target;
var tween, tweenBack;
init();
animate();
function init() {
position = {x: 0, y: 300, rotation: 0};
target = document.getElementById('target');
tween = new TWEEN.Tween(position)
.to({x: 1000, y:[0,300], rotation: 359}, 750)
.delay(1000)
.interpolation( TWEEN.Interpolation.Bezier )
.onUpdate(update);
tweenBack = new TWEEN.Tween(position)
.to({x: 0, y:[0,300], rotation: 0}, 750)
.delay(1000)
.interpolation( TWEEN.Interpolation.Bezier )
.onUpdate(update);
//tween.chain(tweenBack);
//tweenBack.chain(tween);
tween.start();
tween.onComplete(function(){tweenBack.start()});
tweenBack.onComplete(function(){init();});
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
}
function update() {
target.style.left = position.x + 'px';
target.style.top = position.y + 'px';
target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
}
</script>
<!--
</body>
</html>-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment