Jump to content
Search Community

ImmediateRender Explained

dada78 test
Moderator Tag

Go to solution Solved by Rodrigo,

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

Hi guys,

I searched in the DOCs but couldn't find a more detailed explanation of "immediateRender" anywhere.

I thought all instances would immediately render based on your tweening sequence?

For example in what scenario would an "immediateRender:false" be required? 




Link to comment
Share on other sites

  • Solution



Normally immediateRender: false is required when using any type of from() instance (from, fromTo, staggerFrom and staggerFromTo). Keep in mind that this type of instances take the element you're animating from the values you're passing in the constructor to the position the element has when the instance was instantiated. Consider the following code:

TweenLite.from("#myElement", 2, {x:300, y:300, paused:true});

The target of that tween will be rendered according to the CSS rules and any other code affecting both it's position and translation properties. Then when the tween is created, meaning the browser reads and executes the JS code, the values of the x and y properties will be changed immediately to 300 each. If the values of those properties at the time of that code execution are 0 each, then over the course of 2 seconds the element will be animated from 300 to 0 when the instance's paused states changes. If you use immediateRender: false then if you call play() then the element will go from 0 to 300 in a snap and then it'll be animated from 300 to 0. As you can see in this situation immediateRender is not very useful because it looks odd.


Now let's assume that you have a timeline and in that timeline there are two instances controlling the element and the same properties, let's say that one is a to instance and another is a from instance, like this:

var tl = new TimelineLite({paused:true});

  .to("#myElement", 2, {x:300, y:300})
  //other instances
  .fromTo("#myElement", 2, {x:300, y:300}, {x:0, y:0});

Let's say that no matter what happens you need to be sure that the final part of the timeline takes the target from 300 to 0 always. So GSAP reads that code and creates the timeline, then sees the first instance and does all the work to have that instance ready and finally it reaches the final instance. Then GSAP says, ok lets tween the x and y values from 300 to 0 and, hey this is a from instance so I'm going to take those values to 300 so when the playhead arrives to that time in the timeline animates it to the final position. Then the element will be at x:300 and y:300 and the timeline is paused!!, so when you play the timeline the first tween will have no effect because the element will be already at 300. Then the element will be animated back to 0 and when you restart the timeline you'll see a jump from 0 to 300.


Using immediateRender: false in this case will prevent rendering the values of the from instance upon instantiation and those will be enforced when the playhead reaches that point in the timeline:


See the Pen zGmzLv by rhernando (@rhernando) on CodePen


Normally I use immediate render a lot when creating complex animations that need to be responsive and you can't use xPercent and yPercent, so when you pass a CSS breakpoint sometimes you have to create a tween or timeline completely again but that tween/timeline might already started, so you have to pause, record the progress create the instance again and set it back to the progress it had before and play it again. In those cases fromTo instances have safe my behind quite some times, because you have full control of where everything starts, ends and is at the moment you changed the screen size or device orientation.


I'm pretty suer other users could give their inputs of how useful from instances are and how immediateRender is so important when working with complex timelines.

  • Like 7
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.
  • Create New...