Browser Scrollbar Controls TimelineLite Animation

browser-scrollbar-controls-timelinelite-animation.markdown

Browser Scrollbar Controls TimelineLite Animation

This is a test showing how the browser's vertical scrollbar can control a Greensock TimelineLite animation.

A Pen by Adrian Parr on CodePen.

License.

index.html

<div id="demo">
	<div id="demoBackground">
		<div id="logo"></div>
		<div id="timelinelite"></div>
		<div id="tagline"><span><img src="https://www.adrianparr.com/demos/html_scroll_test/img/whos_61x26.png" width="61" height="26"></span><span><img src="https://www.adrianparr.com/demos/html_scroll_test/img/the_35x26.png" width="35" height="26"></span><span><img src="https://www.adrianparr.com/demos/html_scroll_test/img/boss_51x26.png" width="51" height="26"></span><span><img src="https://www.adrianparr.com/demos/html_scroll_test/img/of_27x26.png" width="27" height="26"></span><span><img src="https://www.adrianparr.com/demos/html_scroll_test/img/your_49x26.png" width="49" height="26"></span><span><img src="https://www.adrianparr.com/demos/html_scroll_test/img/tweens_83x26.png" width="83" height="26"></span>
		</div>
	</div>
</div>

<div id="fakeHeight"></div>
<div id="scrollPercentLabel">scrollPercent: <span>0</span></div>

script.js

$(window).load(function() {
	var logo = $("#logo"),
	timelineLite = $("#timelinelite"),
	tagline = $("#tagline span"),
	tl = new TimelineLite({paused:true, onUpdate:timelineIsUpdating});	

	tl.from(logo, 0.5, {css:{left:'-=60px'}, ease:Back.easeOut})
	.from(timelinelite, 0.5, {css:{width:"0px", alpha:0}}, -0.2)
	.staggerFrom(tagline, 0.5, {css:{top:"-=30px", rotation:"-40deg", alpha:0, scale:1.8}, ease:Back.easeOut}, 0.2);

	$(window).scroll(function(e){
		var scrollTop = $(window).scrollTop();
		var docHeight = $(document).height();
		var winHeight = $(window).height();
		var scrollPercent = (scrollTop) / (docHeight - winHeight);
		var scrollPercentRounded = Math.round(scrollPercent*100)/100;

		$('#scrollPercentLabel>span').html(scrollPercentRounded);

		tl.progress( scrollPercent ).pause();
	});

	function timelineIsUpdating() {
		console.log('timelineIsUpdating()');
	}

	//show the demoBackground div after DOM is ready and all images loaded
	TweenLite.set($("#demoBackground"), {css:{visibility:"visible"}});

	$('#scrollPercentLabel').css("display","block");
	$('#demo').css("display","block");

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

style.css

body {
	background-image: url('https://subtlepatterns.com/patterns/crissXcross.png');
	margin: 0px;
	padding: 0px;
}

#fakeHeight {
	height: 6000px;
	width: 1px;
}

#scrollPercentLabel {
	font-family: Impact;
	font-size: 50px;
	color: #2B2B2B;
	background: rgba(255, 255, 255, 0.5);
	padding: 20px;
	position: fixed;
	box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
	border-radius: 15px;
	width: 400px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -200px;
	display: none;
}

#demo {
	width: 700px;
	height: 70px;
	background-color: #333;
	padding: 8px;
	
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: 15px;
	margin-left: -350px;
	display: none;
}

#demoBackground{
	position:absolute;
	background-color:#000;
	overflow:hidden;
	width:700px;
	height:70px;
	visibility:hidden;
}	

#logo{
	position:absolute;
	background: url(https://www.adrianparr.com/demos/html_scroll_test/img/logo_black.jpg) no-repeat;
	height: 60px;
	width: 60px;
	top:6px;
}

#timelinelite{
	position:absolute;
	background: url(https://www.adrianparr.com/demos/html_scroll_test/img/timelinelite.png) no-repeat;
	left:50px;
	top:16px;
	width: 180px;
	height: 33px;
	overflow:hidden;
}

#tagline{
	position:absolute;	
	left:236px;
	top:24px;
	width:306px;
	height:26px;
}

#tagline span{
	position:relative;
	display:inline-block;
}