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 type="module">
			import * as TWEEN from '../dist/tween.esm.js'

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

			const 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)
					const transform = 'translateX(' + object.x + 'px)'
					output.style.webkitTransform = transform
					output.style.transform = transform
				})
				.start()

			animate()

			function animate(time) {
				requestAnimationFrame(animate)
				tween.update(time)
			}
		</script>
	</body>
</html>