Combination of .addTween(), TimelineMax labels and scroll duration in pixels

[ghost]

Hello,

first of all I have to thank you for this awesome script.

I don't understand combining of .addTween() with TimelineMax (with labels or without) and scroll duration in pixels.

For example:

var tl = new TimelineMax({paused: true}),
    $box = $('.box');

tl.insert('part1', 0);
tl.insert('part2', 4);

tl.insert(TweenMax.to($box, 1, {css: {left: 300}}), 'part1');
tl.insert(TweenMax.to($box, 2, {css: {left: -200}}), 'part2');

$.superscrollorama().addTween(500, tl);

It does what I expect: at 500px of window scrollTop it begins animation to 300px left in 1s. Then wait 3s, then begins animation to -200px left in 2s.

But I would like set scroll duration in 600px. So instead:

$.superscrollorama().addTween(500, tl);

I want this:

$.superscrollorama().addTween(500, tl, 600);

It works also, but could you please explain me, how do you convert seconds in TweenMax or in labels of TimelineMax into scrolling pixels? When I change:

tl.insert('part2', 4);

to:

tl.insert('part2', 15);

what happens then? How many seconds is at 100% of timeline?

Thanks very much for reply.

[ghost]

For those, who are also in doubt, it's quite simple:

100% of timeline is computed from a total count of every tweens inserted in the timeline.

So when i have:

tl.insert(TweenMax.to($box, 2, {css: {left: -200}}), 'part2');

I put 2 seconds long animation into 4th second of timeline. The total duration of timeline is 6 seconds.

When I set scroll duration of superscrollorama to 600 px, it's like this:

• scrolled to 600px = 100% = 6 seconds
• scrolled to 200px = 33.33% = 2 seconds
• scrolled to 50px = 8.33% = 0.5 second

Check out a website where I used this awesome plugin! ;) http://carlaine.com/en