In combination with Superscrollorama, what is the meaning of the 2nd parameter in TweenMax.to?

Question

The documentation for TweenMax states that the second parameter for to() is:

duration:Number — Duration in seconds (or in frames for frames-based tweens)

I don't understand what that means for the following snippet:

var PARAM = 1;

superscrollorama_controller.addTween (
     200,
     TweenMax.to(element, PARAM, {backgroundColor: '#0033bb'}),
     300,
     0
);

If PARAM is set to 1, the tween works as expected (element smoothly changes its color). If I set it to 0, there is no smooth transition but an immediate one at the coordinate 500.

I guess that in this example this parameter does not mean duration in seconds, but it rather means frames. Is this the case? And what would that exactly mean?

Answer 1

Here is the quick part of your question.

duration: scroll duration of tween in pixels (0 means autoplay)

However if you are using pins this means something different

Think of it as time frame for tween to take place inside the pin. You could put in 10000 and it wouldn't make much of a difference with just one tween in a pin because the value is based on the pin pixels not your tween. If you are animating multiple tweens with a timeLineLite that number becomes relative to the other. See example below.

var timeLine1 = new TimelineLite({align: "sequence"})
    .append([TweenMax.to($('#display-platform-list .frame-1'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-2'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-3'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-4'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-5'), 2, {css:{display:'block'}})])
    .append([TweenMax.fromTo( $('#platform .callout'), 1, {css:{opacity: 1}}, {css:{opacity: 0}})]);

I used 2 and 1 as easy reference for myself, but here is the quick and dirty math, I have 5 tweens of weight 2 and 1 tween of weight 1 for a total of 11. If I put this timeline in a pin with 110 pixels then the first 5 tweens will happen over 20 pixels each with the last tween happening over 10 pixels. If I put in a 0 then the effect is instantaneous. I could have made the numbers 200 and 100 vs 2 and 1. There would have been no difference since it is basically a ratio of when this effect and how long this effect is happening with superscrollorama.