examples/04_simplest.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tween.js / simplest possible example!</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="info">
			<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
			<h2>04 _ simplest possible example</h2>
			<p>Creating a tween and doing little else apart from that :)</p>
		</div>

		<script src="../src/Tween.js"></script>
		<script src="js/RequestAnimationFrame.js"></script>
		<script>

			init();
			animate();

			function init() {

				var output = document.createElement( 'div' );
				output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px';
				document.body.appendChild( output );

				var tween = new TWEEN.Tween( { x: 50, y: 0 } )
					.to( { x: 400 }, 2000 )
					.easing( TWEEN.Easing.Elastic.InOut )
					.onUpdate( function (object) {

						output.innerHTML = 'x == ' + Math.round( object.x );
						var transform = 'translateX(' + object.x + 'px)';
						output.style.webkitTransform = transform;
						output.style.transform = transform;

					} )
					.start();

			}

			function animate( time ) {

				requestAnimationFrame( animate );
				TWEEN.update( time );

			}

		</script>
	</body>
</html>