examples/01_bars.html

<!doctype html>
<html lang="en">
	<head>
		<title>Tween.js / bars</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>01 _ Bars</h2>
			<p>1000 bars, moving horizontally, looped.</p>
		</div>
		<div id="target"></div>

		<script src="js/stats.min.js"></script>

		<script type="module">
			import * as TWEEN from '../dist/tween.esm.js'

			const group = new TWEEN.Group()

			const stats = new Stats()
			const sds = stats.domElement.style
			sds.position = 'absolute'
			sds.right = '0px'
			sds.top = '0px'
			sds.margin = '4em 3em'
			document.body.appendChild(stats.domElement)

			for (let i = 0; i < 1000; i++) {
				const startValue = 500 + (Math.random() - Math.random()) * 250
				const endValue = 500 + (Math.random() - Math.random()) * 250

				const domElement = document.createElement('div')
				const bg = (Math.random() * 0xffffff) >> 0
				domElement.style.position = 'absolute'
				const y = Math.random() * window.innerHeight
				domElement.style.translate = startValue + 'px ' + y + 'px'
				domElement.style.background = '#' + bg.toString(16)
				domElement.style.width = '100px'
				domElement.style.height = '2px'

				const elem = {x: startValue, domElement: domElement, y}

				const updateCallback = function (object) {
					object.domElement.style.translate = object.x + 'px ' + object.y + 'px'
				}

				const tween = new TWEEN.Tween(elem)
					.to({x: endValue}, 4000)
					.delay(Math.random() * 1000)
					.onUpdate(updateCallback)
					.easing(TWEEN.Easing.Back.Out)
					.start()

				const tweenBack = new TWEEN.Tween(elem)
					.to({x: startValue}, 4000)
					.delay(Math.random() * 1000)
					.onUpdate(updateCallback)
					.easing(TWEEN.Easing.Elastic.InOut)

				tween.chain(tweenBack)
				tweenBack.chain(tween)

				group.add(tween, tweenBack)

				document.body.appendChild(elem.domElement)
			}

			animate()

			function animate(time) {
				requestAnimationFrame(animate)

				group.update(time)
				stats.update()
			}
		</script>
	</body>
</html>