add tween to paused timeline - tween runs immediately if duration == 0

[annam]

Hello again

 

First let me say that I'm very impressed with your excellent support, I've posted on these forums a few times now and I always get a helpful and timely responce. Great job

 

I think I've come across an issue:

 

I have a paused timeline onto which I add tweens - which of course I don't want them to run until i play() the paused timeline.

 

This works great unless the tween has duration 0. If the tween has a duration of 0 the tween runs immediately, as well as as soon as the timeline is played.

 

Check out this jsfiddle, this is very easily reproducable: http://jsfiddle.net/annam/wBwTf/

 

Just comment out the first t.add() declaration and add the second one in to see the difference in behaviour between the two. 

 

The box should remain yellow in both cases as I haven't played the timelne yet, right?

 

Thank you!

[jamiejefferson]

Ah yes you've stumbled across the immediateRender property of tweens.

 

By default a tween that has a duration > 0 will default to immediateRender:false, while a tween with a duration of 0 defaults to immediateRender:true. This is usually a desirable effect when you are just creating stand alone tweens, but it's something to be aware of when adding to timelines.

 

In your case, the TweenLite.to() call actually renders before it is added to the timeline - it has no idea that it is about to be added to a paused timeline so the render happens immediately.

 

You can fix this in a few ways:

var t = new TimelineMax();

// Manually set immediateRender to false
t.add(TweenLite.to('#box', 0, { backgroundColor: 'red', immediateRender: false }), 0);

// or, use the .to() helper method of timelines to add the tween. The
// timeline knows not to set the immediateRender to true in this case
t.to('#box', 0, { backgroundColor: 'red' }, 0);

http://jsfiddle.net/wBwTf/1/

 

 

As a side note, there's a helper method for creating 0 duration tweens .set(), which is the same as .to() except it skips the duration parameter e.g.

t.add(TweenLite.set('#box', { backgroundColor: 'red', immediateRender: false }), 0);

t.set('#box', { backgroundColor: 'red' }, 0);

(and thanks for the kind words - we're always trying our best )

[annam]

Thank you so much!!!!

 

so to timeline.to() function does exactly the same job as the timeline.add(TweenLite()) function? I guess it's better to use the to() then?

[jamiejefferson]

Yep it's literally this:

TimelineLite.to = function(target, duration, vars, position) {
  return duration ? this.add( new TweenLite(target, duration, vars), position) : this.set(target, vars, position);
};
// this = your timeline
// .set() is used when duration is 0 and it determines whether immediateRender is appropriate

The method is there for convenience and if it makes sense to you to use it, then by all means do so.