Skip to content

Instantly share code, notes, and snippets.

@nola
Last active August 5, 2018 05:47
Show Gist options
  • Save nola/6108160 to your computer and use it in GitHub Desktop.
Save nola/6108160 to your computer and use it in GitHub Desktop.
Calculate percentage of scroll Then uses tweenmax callbacks to continue the animation
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment