examples/14_pause_tween.html

<!doctype html>
<html lang="en">
	<head>
		<title>Tween.js / pause tween</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>14 _ pause tween</h2>
			<br />
			<p>
				<button type="button" onclick="pause()">Pause</button>
				, then
				<button type="button" onclick="resume()">Resume</button>.
			</p>
		</div>
		<div
			id="progress_bar_wrapper"
			style="
				position: absolute;
				top: 300px;
				left: 100px;
				width: 500px;
				height: 100px;
				border: 0.5em solid black;
				overflow: hidden;
			"
		>
			<div
				id="progress_bar_fill"
				style="
					position: absolute;
					top: 0px;
					left: 0px;
					width: 0%;
					height: 100%;
					background: #a0dde9;
					line-height: 6em;
					text-align: center;
				"
			>
				0%
			</div>
		</div>

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

			const progress = {width: 0}
			const fill = document.getElementById('progress_bar_fill')

			const tween1 = new TWEEN.Tween(progress)
				.to({width: 100}, 2000)
				.onUpdate(update1)
				.yoyo(true)
				.repeat(Infinity)
				.delay(500)
				.start()

			animate()

			function animate(time) {
				requestAnimationFrame(animate)

				tween1.update(time)
			}

			function update1() {
				fill.style.width = progress.width + '%'
				fill.innerHTML = Math.floor(progress.width) + '%'
			}

			window.pause = () => {
				tween1.pause()
			}

			window.resume = () => {
				tween1.resume()
			}
		</script>
	</body>
</html>