TerryMooreII · August 29, 2015 14:04
diff --git a/jsbin.fizuxa.css b/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;
 } 
 
diff --git a/jsbin.fizuxa.html b/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>
diff --git a/jsbin.fizuxa.js b/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');
	}