Skip to content

Instantly share code, notes, and snippets.

@roseforyou

roseforyou/jsbin.jebiweji.html

Created May 26, 2014 14:40
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/f7782e8b2325330fde92 to your computer and use it in GitHub Desktop.
Save roseforyou/f7782e8b2325330fde92 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.jebiweji.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>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#target{
width:50px;
height:50px;
position:absolute;
background-color:red;
top:300px;
left:100px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>var position;
var target;
var tween, tweenBack;
init();
animate();
function init() {
position = {x: 100, y: 300, rotation: 0};
target = document.getElementById('target');
tween = new TWEEN.Tween(position)
.to({x: 1000, y: [0,300], rotation: 359}, 1000)
.delay(1000)
//.easing( TWEEN.Easing.Back.In )
.interpolation( TWEEN.Interpolation.Bezier )
.onUpdate(update);
tweenBack = new TWEEN.Tween(position)
.to({x: 100, y: [0, 300], rotation: 0}, 1200)
.delay(1000)
.interpolation( TWEEN.Interpolation.Bezier )
.onUpdate(update);
tween.chain(tweenBack);
tweenBack.chain(tween);
tween.start();
}
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