Jump to content


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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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);




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 ;))

  • Like 4
Link to comment
Share on other sites

Thank you so much!!!! :D


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?

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.