TerryMooreII/jsbin.fizuxa.css

## jsbin.fizuxa.css
body{
  background-color:black;
}

#title{
  color:#fff;
  font-size:18px;
  margin-bottom:20px
}

.muted, a, a:visited, a:link, a:hover{
  color:#ddd;
  text-decoration:none
}
.btn-group{
  margin-bottom:10px;
}

#illusion{
  height:500px;
  width:500px;
  border: 1px solid red;
  background-color: red;
  border-radius:50%;
}


.line{
  height:500px;
  width:0px;
  background-color: black;
  position:absolute;
  left:260px;
}


.path1{
  transform:rotate(0deg);
}

.path2{
  transform:rotate(90deg);
}
.path3{
  transform:rotate(45deg);
}

.path4{
  transform:rotate(135deg);
}

.path5{
  transform:rotate(112.5deg);
}

.path6{
  transform:rotate(67.5deg);
}

.path7{
  transform:rotate(157.5deg);
}

.path8{
  transform:rotate(22.5deg);
}

.ball{
  height:30px;
  width:30px;
  border-radius:50%;
  background-color:#fff;
  left: -15px;
  position:absolute;
}

.ball-animation{
  position: absolute;
  -webkit-animation-name: movement;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;

  -moz-animation-name: movement;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-play-state: running;

  animation-name: movement;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes movement {
  from{
    top:0px;
  }
  to{
    top:475px;
  }
}

@keyframes movement {
  from{
    top:0px;
  }
  to{
    top:475px;
  }
}

@-moz-keyframes movement {
  from{
    top:0px;
  }
  to{
    top:475px;
  }
}

.ball1{
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.ball2{
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.ball3{
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.ball4{
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}

.ball5{
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.ball6{
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.ball7{
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.ball8{
  -webkit-animation-delay: .5s;
  -moz-animation-delay: .5s;
  animation-delay: .5s;
}


## jsbin.fizuxa.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="title">
    Optical Illusion Turns Dots Moving in a Straight Line Into a Spinning Circle
  </div>
  <div class="btn-group">
    <button id="showLines">Show Lines</button>
    <button id="pause">Pause</button>
  </div>
  <div class="muted">
    By <a href="http://twitter.com/terrymooreii" target="_blank">@TerryMooreII</a>
  </div>
  <div id="illusion">
    <div class="line path1">
      <div class="ball ball-animation ball1"></div>
    </div>
    <div class="line path2">
      <div class="ball ball-animation ball2"></div>
    </div>
    <div class="line path3">
      <div class="ball ball-animation ball3"></div>
    </div>
    <div class="line path4">
      <div class="ball ball-animation ball4"></div>
    </div>
    <div class="line path5">
      <div class="ball ball-animation ball5"></div>
    </div>
    <div class="line path6">
      <div class="ball ball-animation ball6"></div>
    </div>
    <div class="line path7">
      <div class="ball ball-animation ball7"></div>
    </div>
    <div class="line path8">
      <div class="ball ball-animation ball8"></div>
    </div>
  </div>

<div class="muted">
Based on this <a href="http://laughingsquid.com/optical-illusion-turns-dots-moving-in-a-straight-line-into-a-spinning-circle/" target="_blank">
  Youtube Video</a>
</div>


</body>
</html>

## jsbin.fizuxa.js
var isPlaying = true;
var isShowingLines = false;

var ballAnimation = $('.ball-animation');
var lines = $('.line');


$('#pause').on('click', function(){
   if (isPlaying)
     pause();
  else
    play();
});

$('#showLines').on('click', function(){
  if (isShowingLines)
    hideLines();
  else
    showLines();

});


var play = function play(){
  isPlaying = true;
  ballAnimation.css('-webkit-animation-play-state', 'running');
}


var pause = function pause(){
  isPlaying = false;
  ballAnimation.css('-webkit-animation-play-state', 'paused');
}


var showLines = function showLines(){
  isShowingLines = true;
  lines.css('width', '1px');
}

var hideLines = function hideLines(){
  isShowingLines = false;
  lines.css('width', '0px');
}
	body{
	background-color:black;
	}

	#title{
	color:#fff;
	font-size:18px;
	margin-bottom:20px
	}

	.muted, a, a:visited, a:link, a:hover{
	color:#ddd;
	text-decoration:none
	}
	.btn-group{
	margin-bottom:10px;
	}

	#illusion{
	height:500px;
	width:500px;
	border: 1px solid red;
	background-color: red;
	border-radius:50%;
	}


	.line{
	height:500px;
	width:0px;
	background-color: black;
	position:absolute;
	left:260px;
	}


	.path1{
	transform:rotate(0deg);
	}

	.path2{
	transform:rotate(90deg);
	}
	.path3{
	transform:rotate(45deg);
	}

	.path4{
	transform:rotate(135deg);
	}

	.path5{
	transform:rotate(112.5deg);
	}

	.path6{
	transform:rotate(67.5deg);
	}

	.path7{
	transform:rotate(157.5deg);
	}

	.path8{
	transform:rotate(22.5deg);
	}

	.ball{
	height:30px;
	width:30px;
	border-radius:50%;
	background-color:#fff;
	left: -15px;
	position:absolute;
	}

	.ball-animation{
	position: absolute;
	-webkit-animation-name: movement;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;

	-moz-animation-name: movement;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-play-state: running;

	animation-name: movement;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes movement {
	from{
	top:0px;
	}
	to{
	top:475px;
	}
	}

	@keyframes movement {
	from{
	top:0px;
	}
	to{
	top:475px;
	}
	}

	@-moz-keyframes movement {
	from{
	top:0px;
	}
	to{
	top:475px;
	}
	}

	.ball1{
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	animation-delay: 0s;
	}

	.ball2{
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
	}

	.ball3{
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
	}

	.ball4{
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	animation-delay: 3s;
	}

	.ball5{
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
	animation-delay: 2.5s;
	}

	.ball6{
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	animation-delay: 1.5s;
	}

	.ball7{
	-webkit-animation-delay: 3.5s;
	-moz-animation-delay: 3.5s;
	animation-delay: 3.5s;
	}

	.ball8{
	-webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	animation-delay: .5s;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="title">
	Optical Illusion Turns Dots Moving in a Straight Line Into a Spinning Circle
	</div>
	<div class="btn-group">
	<button id="showLines">Show Lines</button>
	<button id="pause">Pause</button>
	</div>
	<div class="muted">
	By <a href="http://twitter.com/terrymooreii" target="_blank">@TerryMooreII</a>
	</div>
	<div id="illusion">
	<div class="line path1">
	<div class="ball ball-animation ball1"></div>
	</div>
	<div class="line path2">
	<div class="ball ball-animation ball2"></div>
	</div>
	<div class="line path3">
	<div class="ball ball-animation ball3"></div>
	</div>
	<div class="line path4">
	<div class="ball ball-animation ball4"></div>
	</div>
	<div class="line path5">
	<div class="ball ball-animation ball5"></div>
	</div>
	<div class="line path6">
	<div class="ball ball-animation ball6"></div>
	</div>
	<div class="line path7">
	<div class="ball ball-animation ball7"></div>
	</div>
	<div class="line path8">
	<div class="ball ball-animation ball8"></div>
	</div>
	</div>

	<div class="muted">
	Based on this <a href="http://laughingsquid.com/optical-illusion-turns-dots-moving-in-a-straight-line-into-a-spinning-circle/" target="_blank">
	Youtube Video</a>
	</div>


	</body>
	</html>
	var isPlaying = true;
	var isShowingLines = false;

	var ballAnimation = $('.ball-animation');
	var lines = $('.line');


	$('#pause').on('click', function(){
	if (isPlaying)
	pause();
	else
	play();
	});

	$('#showLines').on('click', function(){
	if (isShowingLines)
	hideLines();
	else
	showLines();

	});


	var play = function play(){
	isPlaying = true;
	ballAnimation.css('-webkit-animation-play-state', 'running');
	}


	var pause = function pause(){
	isPlaying = false;
	ballAnimation.css('-webkit-animation-play-state', 'paused');
	}


	var showLines = function showLines(){
	isShowingLines = true;
	lines.css('width', '1px');
	}

	var hideLines = function hideLines(){
	isShowingLines = false;
	lines.css('width', '0px');
	}