nola/test3.html

## test3.html
<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.1/TweenMax.min.js"></script>
	<script>
		$(function(){

			var blocks = $(".one, .two, .three, .four");
			tl = new TimelineMax({paused: true});
			tl.to($(".one"), 1, {rotationZ:360, transformOrigin:"0% 100% 100px"})
				.to($(".two"), 1, {rotationZ:360, transformOrigin:"100% 0% 100px"}, 0)
				.to($(".three"), 1, {rotationZ:360, transformOrigin:"100% 100% 100px"}, 0)
				.to($(".four"), 1, {rotationZ:360, transformOrigin:"0% 0% 100px"}, 0)
				.staggerTo(blocks, 1, {left:50},0)


			$(window).scroll(function(){
				var progress = tl.totalProgress();
				var pct = $(this).scrollTop() / ($(document).height() - $(window).height());
				tl.progress(pct);
				console.log(pct);
			});

			$('div').click(function(){
				tl.play();
			});
		});

	</script>
	<style>
		body{height: 2000px;}
		div{
			height: 100px;
			width: 100px;
			position: fixed;
		}
		.one{
			top: 33%;
			left: 50%;
			background-color: red;

		}
		.two{
			top: 50.8%;
			left: 41.5%;
			background-color: blue;

		}
		.three{
			top: 33%;
			background-color: green;
			left: 41.5%;
		}
		.four{
			top: 50.8%;
			left: 50%;
			background-color: black;
		}
	</style>
</head>

<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="">
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.1/TweenMax.min.js"></script>
	<script>
	$(function(){

	var blocks = $(".one, .two, .three, .four");
	tl = new TimelineMax({paused: true});
	tl.to($(".one"), 1, {rotationZ:360, transformOrigin:"0% 100% 100px"})
	.to($(".two"), 1, {rotationZ:360, transformOrigin:"100% 0% 100px"}, 0)
	.to($(".three"), 1, {rotationZ:360, transformOrigin:"100% 100% 100px"}, 0)
	.to($(".four"), 1, {rotationZ:360, transformOrigin:"0% 0% 100px"}, 0)
	.staggerTo(blocks, 1, {left:50},0)


	$(window).scroll(function(){
	var progress = tl.totalProgress();
	var pct = $(this).scrollTop() / ($(document).height() - $(window).height());
	tl.progress(pct);
	console.log(pct);
	});

	$('div').click(function(){
	tl.play();
	});
	});

	</script>
	<style>
	body{height: 2000px;}
	div{
	height: 100px;
	width: 100px;
	position: fixed;
	}
	.one{
	top: 33%;
	left: 50%;
	background-color: red;

	}
	.two{
	top: 50.8%;
	left: 41.5%;
	background-color: blue;

	}
	.three{
	top: 33%;
	background-color: green;
	left: 41.5%;
	}
	.four{
	top: 50.8%;
	left: 50%;
	background-color: black;
	}
	</style>
	</head>

	<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
	</body>

	</html>