Scroll to Label Position

by rhernando

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/ScrollToPlugin.min.js"></script>
<div id="marker"></div>
<div id="prgLog"></div>
<div id="timeLog"></div>
<div id="lab1Log"></div>
<div id="lab2Log"></div>
<div id="div1"></div>
<button id="btn1">Tween to Label 2</button>
<button id="btn2">Tween to Label 3</button>

CSS

#marker{
	position:absolute;
	left:-50px;
	width:5px;
	height:4000px;
}
#div1{
	position:fixed;
	width:100px;
	height:100px;
	background:#00f;
	top:210px;
}
#prgLog{
	width:200px;
	height:40px;
	line-height:40px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	font-weight:bold;
	background:#EEE;
	position:fixed;
	top:10px;
}
#lab1Log{
	width:200px;
	height:40px;
	line-height:40px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	font-weight:bold;
	background:#EEE;
	position:fixed;
	top:110px;
}
#lab2Log{
	width:250px;
	height:40px;
	line-height:40px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	font-weight:bold;
	background:#EEE;
	position:fixed;
	top:160px;
}
#timeLog{
	width:200px;
	height:40px;
	line-height:40px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	font-weight:bold;
	background:#EEE;
	position:fixed;
	top:60px;
}
#btn1{
	position:fixed;
	top:10px;
	left:300px;
}
#btn2{
	position:fixed;
	top:40px;
	left:300px;
}

JavaScript

var prgLog = $("div#prgLog"),
	div1 = $("div#div1"),
	timeLog = $("div#timeLog"),
	lab1Log = $("div#lab1Log"),
	lab2Log = $("div#lab2Log"),
    btn1 = $("button#btn1"),
	btn2 = $("button#btn2"),
	getPos,
	progressNumber,
	tlDuration,
	lab2Time,
	lab2Pos,
    lab3Time,
	lab3Pos,
    startPoint = 400,
    endPoint = 3000,
	tl = new TimelineMax({paused:true});

tl
	.to(div1, 5, {left:400}, 'label1')
	.to(div1, 4, {top:400}, 'label2')
	.to(div1, 1, {scale:2}, 'label3');

tlDuration = tl.duration();

lab2Time = tl.getLabelTime('label2');
lab2Pos = ( (lab2Time / tlDuration) * (endPoint - startPoint) + startPoint);

lab3Time = tl.getLabelTime('label3');
lab3Pos = ( (lab3Time / tlDuration) * (endPoint - startPoint) + startPoint);

timeLog.html('Timeline Duration: ' + tlDuration);
lab1Log.html('Label2 time: ' + lab2Time);
lab2Log.html('Label2 Pixel Position: ' + lab2Pos);

$(window).scroll(function()
{
	getPos = $(window).scrollTop();
	progressNumber = (1 / (3000 - 400)) * (getPos - 400);
	prgLog.html(progressNumber);
	if(progressNumber >= 0 && progressNumber <= 1)
	{
		tl.progress(progressNumber);
	}
});

btn1.click(function()
{
	TweenMax.to(window, 2, {scrollTo:lab2Pos});
});

btn2.click(function()
{
	TweenMax.to(window, 2, {scrollTo:lab3Pos});
});