Get a label's position in pixels?

[sailorob]

I'm using superscrollorama and am having a hard time trying to understand how to use TimeLineMax properly with it. I need to be able to scroll to a specfic point in the timeline, but tweenTo() isn't animating. 

 

I have a superscrolloama object which has a pinned TimeLineMax object. Is there anyway I can tween to a label, or get the scroll.y position of an element or label. I'm out of ideas.

[Rodrigo]

Hi and welcome to the forums,

 

Maybe the reason why tweenTo() isn't working is because when you use superscrollorama the timeline progress is set by the scroll position, therefore if you use tweenTo() it's very likely that the function is tweening your timeline, but the screen is not where the action is happening so you're not able to see your timeline being tweened.

 

Now in order to get the pixel position of a specific label you need to know the label's relative position in the timeline and then associate it to the window scroll points in which your timeline is animated via superscrollorama (the values you give to superscrollorama when you set the function for that particular timeline). For example you have the following timeline:

var tl = new TimelineMax({paused:true});

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

The timeline lasts 10 seconds, the first tween 5 seconds, the second 4 seconds and the third one just 1 second. The fisrt label is at 0 seconds, the second label is at 5 seconds and the third label is at 9 seconds. So using the getLabelTime() method you can get that value into a variable, and with the duration() method you get the timeline total time. With those values you can see at which position the label is in terms of the percentage of the timeline which is in other words the current progress of the timeline , and since superscrollorama works with start and end values of the window's scroll position you can relate that percentage with the scroll position. If you look at this tutorial I made some time ago you'll find this expression for relating the current scroll position with a tween/timeline progress:

var progressNumber = (1 / (endPoint - startPoint)) * (getPos - startPoint);

The breakdown is as follows:

• progressNumber: the progress of the tween/timeilne.
• endPoint: where the tween/timeline ends once you've scrolled there.
• startPoint: where the tween/timeline starts as soon as you've scrolled to that position.
• getPos: the current position of the window as you scroll up & down.

var tlDuration,
    lab2Time,
    lab2Pos,

tlDuration = tl.duration();
lab2Time = tl.getLabelTime('label2');

Since you know the starting and end position (values that you feed to the superscrollorama function) and you can calculate the timeline progress at a certain label, all you have to do is isolate the getPos value in the first expression:

var tlDuration,
    lab2Time,
    lab2Pos,

tlDuration = tl.duration();
lab2Time = tl.getLabelTime('label2');

The expression with the current variables will look like this:

(lab2Time / tlDuration) = (1 / (endPoint - startPoint)) * (lab2Pos - startPoint);

Since we know the progress value but not the lab2Pos variable value, we isolate it:

lab2Pos = ( (lab2Time / tlDuration) * (endPoint - startPoint) ) + startPoint;

And if we assume that the timeline begins at 400 pixels and ends at 3000 pixels, it will result in this:

lab2Pos = ( ( 5 / 10) * (3000 - 400) ) + 400 = 1700

 

Finally in order to get your tween to that position and at the same time scroll the window you could use the scrollTo plugin, like this:

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

You can see it working here:

http://jsfiddle.net/rhernando/fdFFp/2/

 

Hope this helps,

Cheers,

Rodrigo.