behnammodi/raf.html

## raf.html
<html>
  <head>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>

  <script>
    const box = document.querySelector("#box");

    let x = 0;
    let id = null;

    let firstX = 0;
    let start = false;

    function easeOutQuint(x) {
      const c1 = 1.70158;
      const c2 = c1 * 1.525;

      return x < 0.5
        ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
        : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
    }

    const a = 0;

    window.addEventListener("mousedown", (event) => {
      firstX = event.x;
      start = true;
      requestAnimationFrame(obs);
    });

    window.addEventListener("mousemove", (event) => {
      if (start) {
        if (event.x <= 1000) {
          x =
            event.x * easeOutQuint(event.x / 1000) -
            firstX * easeOutQuint(firstX / 1000);
        } else {
          start = false;
          cancelAnimationFrame(id);
        }
      }
    });

    window.addEventListener("mouseup", (event) => {
      start = false;
      cancelAnimationFrame(id);
    });

    function obs(time) {
      console.log(time);
      box.style.transform = `translateX(${x}px)`;
      id = requestAnimationFrame(obs);
    }
  </script>
</html>
	<html>
	<head>
	<style>
	#box {
	width: 100px;
	height: 100px;
	background-color: lightseagreen;
	}
	</style>
	</head>
	<body>
	<div id="box"></div>
	</body>

	<script>
	const box = document.querySelector("#box");

	let x = 0;
	let id = null;

	let firstX = 0;
	let start = false;

	function easeOutQuint(x) {
	const c1 = 1.70158;
	const c2 = c1 * 1.525;

	return x < 0.5
	? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
	: (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
	}

	const a = 0;

	window.addEventListener("mousedown", (event) => {
	firstX = event.x;
	start = true;
	requestAnimationFrame(obs);
	});

	window.addEventListener("mousemove", (event) => {
	if (start) {
	if (event.x <= 1000) {
	x =
	event.x * easeOutQuint(event.x / 1000) -
	firstX * easeOutQuint(firstX / 1000);
	} else {
	start = false;
	cancelAnimationFrame(id);
	}
	}
	});

	window.addEventListener("mouseup", (event) => {
	start = false;
	cancelAnimationFrame(id);
	});

	function obs(time) {
	console.log(time);
	box.style.transform = `translateX(${x}px)`;
	id = requestAnimationFrame(obs);
	}
	</script>
	</html>