Inndy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#ball {
  height: 6px;
  width: 6px;

  background-color: #00f;
  border-radius: 100%;

  position: absolute;

  top: 120px;
  left: 177px;
}
</style>
</head>
<body>
  <div id="ball"></div>

  <button id="pause">Pause / Run</button>
  <button id="reset">Reset</button>

  <img src="https://media.giphy.com/media/3o7WTN8FmMgK9hrZyU/giphy.gif" alt="">
<script id="jsbin-javascript">
var pos = 0;
var MAX = 100;
var freq = 53;
var dist = 280;

var running = false;

function move(force)
{
  if(!force && !running) return pos;
  pos = (pos + 1) % MAX;
  console.log('move');

  var rate = pos / MAX;

  var theta = Math.PI * 2 * rate;

  var x = dist / 2 * (1 + Math.sin(theta));

  ball.style.top = (x + 60) + 'px';

  return pos;
}

setInterval(move, 1000 / freq);

pause.onclick = function () {
  running = !running;
};

reset.onclick = function () {
  pos = 969;
  console.log(move());
};
</script>


<script id="jsbin-source-css" type="text/css">#ball {
  height: 6px;
  width: 6px;

  background-color: #00f;
  border-radius: 100%;

  position: absolute;

  top: 120px;
  left: 177px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var pos = 0;
var MAX = 100;
var freq = 53;
var dist = 280;

var running = false;

function move(force)
{
  if(!force && !running) return pos;
  pos = (pos + 1) % MAX;
  console.log('move');

  var rate = pos / MAX;

  var theta = Math.PI * 2 * rate;

  var x = dist / 2 * (1 + Math.sin(theta));

  ball.style.top = (x + 60) + 'px';

  return pos;
}

setInterval(move, 1000 / freq);

pause.onclick = function () {
  running = !running;
};

reset.onclick = function () {
  pos = 969;
  console.log(move());
};</script></body>
</html>

## jsbin.yacivicuga.css
#ball {
  height: 6px;
  width: 6px;

  background-color: #00f;
  border-radius: 100%;

  position: absolute;

  top: 120px;
  left: 177px;
}

## jsbin.yacivicuga.js
var pos = 0;
var MAX = 100;
var freq = 53;
var dist = 280;

var running = false;

function move(force)
{
  if(!force && !running) return pos;
  pos = (pos + 1) % MAX;
  console.log('move');

  var rate = pos / MAX;

  var theta = Math.PI * 2 * rate;

  var x = dist / 2 * (1 + Math.sin(theta));

  ball.style.top = (x + 60) + 'px';

  return pos;
}

setInterval(move, 1000 / freq);

pause.onclick = function () {
  running = !running;
};

reset.onclick = function () {
  pos = 969;
  console.log(move());
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#ball {
	height: 6px;
	width: 6px;

	background-color: #00f;
	border-radius: 100%;

	position: absolute;

	top: 120px;
	left: 177px;
	}
	</style>
	</head>
	<body>
	<div id="ball"></div>

	<button id="pause">Pause / Run</button>
	<button id="reset">Reset</button>

	<img src="https://media.giphy.com/media/3o7WTN8FmMgK9hrZyU/giphy.gif" alt="">
	<script id="jsbin-javascript">
	var pos = 0;
	var MAX = 100;
	var freq = 53;
	var dist = 280;

	var running = false;

	function move(force)
	{
	if(!force && !running) return pos;
	pos = (pos + 1) % MAX;
	console.log('move');

	var rate = pos / MAX;

	var theta = Math.PI * 2 * rate;

	var x = dist / 2 * (1 + Math.sin(theta));

	ball.style.top = (x + 60) + 'px';

	return pos;
	}

	setInterval(move, 1000 / freq);

	pause.onclick = function () {
	running = !running;
	};

	reset.onclick = function () {
	pos = 969;
	console.log(move());
	};
	</script>


	<script id="jsbin-source-css" type="text/css">#ball {
	height: 6px;
	width: 6px;

	background-color: #00f;
	border-radius: 100%;

	position: absolute;

	top: 120px;
	left: 177px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var pos = 0;
	var MAX = 100;
	var freq = 53;
	var dist = 280;

	var running = false;

	function move(force)
	{
	if(!force && !running) return pos;
	pos = (pos + 1) % MAX;
	console.log('move');

	var rate = pos / MAX;

	var theta = Math.PI * 2 * rate;

	var x = dist / 2 * (1 + Math.sin(theta));

	ball.style.top = (x + 60) + 'px';

	return pos;
	}

	setInterval(move, 1000 / freq);

	pause.onclick = function () {
	running = !running;
	};

	reset.onclick = function () {
	pos = 969;
	console.log(move());
	};</script></body>
	</html>