Jump to content


immediateRender explained?

Moderator Tag

Recommended Posts

Hello all,


I'm trying to use immediateRender to prevent tweens from occurring while I build a timeline, something like the following:


_transitionTimeline.append(TweenMax.to(_tf , .25, { immediateRender :false, alpha: 0, x:_tf.x +  TEXT_MOVE, scaleX: .8 } ) );
_transitionTimeline.append(TweenMax.fromTo (_tf, .25, { alpha: 0, x:TEXT_X - TEXT_MOVE, scaleX: .8 }, { immediateRender:false, alpha:1, x:TEXT_X, scaleX:1 } ) );


That code is used in the init function of my class to create the timeline, and there's a public facing method that calls restart() to play the timeline as needed based on an event. (There's some more tweens in there, but i stripped them out just for simplicity's sake.)


the problem is, that those tweens are executed, even though immediaterender is set to false. does it only work for tweens that have a duration of 0?


also, it would be great to have something like immedateRender available on delayedCall(), so you could build a re-usable timeline wtihout triggering everything while it's being created.



Link to comment
Share on other sites

Hmm, I think you might be misunderstanding something because tweens do NOT render immediately by default. The only exception is from() tweens, but you can easily set immediateRender:false on those. You don't need to set immediateRender:false on any other tweens (like to() or fromTo() tweens). So you could build a TimelineLite with 100 tweens initially, for example, and none of them will be executed until the next ENTER_FRAME event fires. If you believe your tweens are firing immediately, please post a sample FLA that demonstrates the issue.

Link to comment
Share on other sites

  • 3 months later...

I have the same problem.

I do this:

textBoxFade = new TweenLite(textBoxFrame, 0.2, { alpha:1, onReverseComplete:textBoxPopulate, ease:Sine.easeOut, immediateRender:false } );

My textBoxFrame is faded up instantly, before I call textBoxFade.play();.

Same goes for TweenMax. Removing immediateRender:false makes no difference.

My current workaround is to do a textBoxFade.pause(); directly after the call.


Is this a bug? Am I doing something wrong?

Link to comment
Share on other sites

Is this a bug? Am I doing something wrong?


Nope, it's not a bug. As indicated in all the ASDocs, tweens will always play immediately by default. That's different than immediateRender. If you want your tween to be paused initially, you can either pause() it like you discovered, or pass "paused:true" in the vars object.


immediateRender simply has to do with forcing the very first render of the tween to happen instantly instead of waiting one frame (there are some important reasons it is normally better to allow it to wait a frame, but I won't bore you with the explanation).


It sounds like you simply need to add paused:true to your tweens and you'll be golden.

Link to comment
Share on other sites

Absolutely! I totally misinterpreted the immediateRender option. paused:true is what I need!



Link to comment
Share on other sites

  • 2 years later...

I am having similar issues:


Specifically, I am trying to put a TweenMax inside of a TimelineMax.


var tl:TimelineMax = new TimelineMax( { immediateRender: false } );
tl.append( new TweenMax( myClip, 43/60, { paused: true, frame: 43 } );
return tl;


Some other code calls appends other data to the Timeline and then later on 'tl.play();' is called. The problem is that the paused TweenMax never start's to play. If I remove the "paused: true" call the clip plays when the objects are constructed. As explained in this post " immediateRender: false " doesn't seem to do anything.


So how does one nest a TweenMax using 'frame' tween in a TimelineMax?

Link to comment
Share on other sites

It looks like I need to pause my TimelineMax as well, which is not very consistant with other TimelineMax functionality... unless I am mistaken. Most TimelineMax's don't start playing until you tell the too.


var tl:TimelineMax = new TimelineMax( { paused: true, immediateRender: false } );
tl.append( new TweenMax( myClip, 43/60, { paused: true, frame: 43 } );
return tl;

Link to comment
Share on other sites



Sorry to hear you are having trouble.


Your nested timeline and the tweens it contains should not play at all until the proper time in the parent timeline is reached.


Unless you put a stop() action on frame 1 of myClip or do myClip.stop(), it's timeline is going to play automatically regardless of whether or not you have scheduled a tween to frame-tween it.

I'm guessing that is the problem.


Give it a shot.

Link to comment
Share on other sites

  • 11 months later...

Sorry to resurrect an older post but my question pertains to TweenLite's playing right away inside TimelineLite's.  It seems that if I put a TweenLite with a 0 duration inside a TimelineLite, it will play upon page load (even if the TimelineLite is paused).  I have to add immediateRender: false to my 0 duration Tweens.  Is this desired?  Here is my sample code:

var timeline = new TimelineLite();
timeline.append(TweenLite.to($face, 0.5, { left: 285, top: 160 }), 0.5);
timeline.append(TweenLite.to($face, 0.4, { left: 240, top: 170 }), 0.4);
timeline.append(TweenLite.to($face, 0, { left: 169, top: 87 })); // happens upon page load


There are not really "br's" in my javascript - those are being added by the forum editor for some reason.

Link to comment
Share on other sites

 0-duration tweens don't have a start or and end really. So as soon as they are created they are done. When your tween is created it has no idea that it lives in a timeline and is scheduled to execute later in time.


So, yes, setting immediateRender:false is what you should do in this case OR if you use v12 you can use TimelineLite's set() method which creates a 0-duration tween with immediateRender set to false for you

timeline.set($face, {left:169, top:82});

I would strongly suggest you upgrade to v12 and the new syntax for creating timelines.

Your entire code can be condensed to:

var timeline = new TimelineLite({paused:true});
timeline.to($face, 0.5, { left: 285, top: 160 }, "+=0.5")
  .to($face, 0.4, { left: 240, top: 170 }, "+=0.4");
  .to($face, 0, { left: 169, top: 87 });

See the docs for the to() method

Once you experiment with the new syntax there is no going back.
Link to comment
Share on other sites

Hi Carl,


Super helpful, thank you very much!  The 0 duration tween bit makes sense.  I'm on the newest version but was basing my code off an older tutorial.  I switched to, and love the new syntax.

  • Like 1
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.