nola/tweenmax-scroll

## tweenmax-scroll
<!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(){

			tl = new TimelineMax({paused: true});
			tl.to($("div"), .2, {width: 50,
				onComplete: withDraw,
				onReverseComplete: function(){ console.log("start"); }
			});

			function withDraw(){
				TweenMax.to($("div"), .2, {marginLeft:50, width:10, onComplete:down});
			}
			function down(){
				TweenMax.to($("div"), .2, {height:50, onComplete:downSquare});
			}
			function downSquare(){
				TweenMax.to($("div"), .2, {marginTop: 50,height:10, onComplete:left});
			}
			function left(){
				TweenMax.to($("div"), .2, {width:50, marginLeft:0, onComplete:leftSquared});
			}
			function leftSquared(){
				TweenMax.to($("div"), .2, {width:10, onComplete:backToTop});
			}
			function backToTop(){
				TweenMax.to($("div"), .2, {height:50, marginTop:0, onComplete:square});
			}
			function square(){
				TweenMax.to($("div"), .2, {height:10});
			}

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

	</script>
	<style>
		body{height: 2000px;}
		div{
			height: 10px;
			width: 0px;
			background-color: red;
			position: fixed;
			top: 0px;
			left: 0px;
	}
	</style>
</head>

<body>
	<div></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(){

	tl = new TimelineMax({paused: true});
	tl.to($("div"), .2, {width: 50,
	onComplete: withDraw,
	onReverseComplete: function(){ console.log("start"); }
	});

	function withDraw(){
	TweenMax.to($("div"), .2, {marginLeft:50, width:10, onComplete:down});
	}
	function down(){
	TweenMax.to($("div"), .2, {height:50, onComplete:downSquare});
	}
	function downSquare(){
	TweenMax.to($("div"), .2, {marginTop: 50,height:10, onComplete:left});
	}
	function left(){
	TweenMax.to($("div"), .2, {width:50, marginLeft:0, onComplete:leftSquared});
	}
	function leftSquared(){
	TweenMax.to($("div"), .2, {width:10, onComplete:backToTop});
	}
	function backToTop(){
	TweenMax.to($("div"), .2, {height:50, marginTop:0, onComplete:square});
	}
	function square(){
	TweenMax.to($("div"), .2, {height:10});
	}

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

	</script>
	<style>
	body{height: 2000px;}
	div{
	height: 10px;
	width: 0px;
	background-color: red;
	position: fixed;
	top: 0px;
	left: 0px;
	}
	</style>
	</head>

	<body>
	<div></div>
	</body>

	</html>