joskid · July 7, 2020 09:00
diff --git a/raf.html b/raf.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-size: 20px;
        font-weight: 300;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      header {
        padding: 1rem;
        margin: 1rem 0;
      }
      p {
        margin: 1rem;
        padding: 1rem;
        border: 1px solid #999;
      }
      #box {
        background-color: cornflowerblue;
        width: 1rem;
        height: 1rem;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Request Animation Frame</h1>
    </header>
    <main>
      <p id="output"></p>
      <p id="box"></p>
    </main>
    <script>
      let output = document.getElementById('output');
      let box = document.getElementById('box');
      let number = 0;
      let xpos = 0;
      function paint() {
        number++;
        output.textContent = number;

        if (number < 300) {
          requestAnimationFrame(paint);
        }
      }

      function move(timmy) {
        if (timmy) {
          let diff = timmy - number;
          console.log('frame', diff);
          number = timmy; //highResTimeStamp
        }
        xpos = xpos + 5;
        box.style.transform = `translateX(${xpos}px)`;
        let ww = document.body.clientWidth - 100;
        if (xpos < ww) {
          requestAnimationFrame(move);
        }
      }

      window.requestAnimationFrame(move);
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	html {
	font-size: 20px;
	font-weight: 300;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	header {
	padding: 1rem;
	margin: 1rem 0;
	}
	p {
	margin: 1rem;
	padding: 1rem;
	border: 1px solid #999;
	}
	#box {
	background-color: cornflowerblue;
	width: 1rem;
	height: 1rem;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Request Animation Frame</h1>
	</header>
	<main>
	<p id="output"></p>
	<p id="box"></p>
	</main>
	<script>
	let output = document.getElementById('output');
	let box = document.getElementById('box');
	let number = 0;
	let xpos = 0;
	function paint() {
	number++;
	output.textContent = number;

	if (number < 300) {
	requestAnimationFrame(paint);
	}
	}

	function move(timmy) {
	if (timmy) {
	let diff = timmy - number;
	console.log('frame', diff);
	number = timmy; //highResTimeStamp
	}
	xpos = xpos + 5;
	box.style.transform = `translateX(${xpos}px)`;
	let ww = document.body.clientWidth - 100;
	if (xpos < ww) {
	requestAnimationFrame(move);
	}
	}

	window.requestAnimationFrame(move);
	</script>
	</body>
	</html>