gsap.from and immediateRender: false. Why the initial value will never be set?

[Asored]

Hi all!

 

I understand the principal logic of immediateRender. Setting this value to true may be definitely needed for .from and .fromTo methods, where we need the initial properties very fast. But I'm on a situation where I need to set immediateRender to false. As you can see in the Codepen, some basic staggered splittext animations are not working as I expect. Seems that the animation starts without setting the initial properties for each char element.

 

Is there a way to force gsap to wait for the initial value while setting immediateRender to false? By the way, I need this for a backend UI where the user can change the progress of a timeline with a dragger. Also wenn the .progress is setting manually to position 0, the element never gets the initial properties. You can see this example in my pen in the setTimeout function, where I set the timeline to the position 0 after three seconds.

 

I really appreciate your help!

See the Pen qByeQrV by asored (@asored) on CodePen

[GreenSock]

Hi @Asored. Yes, that's working exactly as expected. 

 

By setting immediateRender: false, you're telling GSAP to wait until each individual staggered sub-tween starts before setting each initial from() value. From what I can tell, it's doing exactly that. 

 

And the same goes for the behavior your seeing when you jump the playhead back to the very start - it's rendering it precisely as it should. When the playhead was at 0, only that very first character had its initial values set from the from() tween. 

 

I'm a bit confused about why you think you need to set immediateRender: false because it sounds like you want precisely the behavior that immediateRender: true delivers. Can you help me understand why you're setting it to false?

 

2 hours ago, Asored said:

Is there a way to force gsap to wait for the initial value while setting immediateRender to false?

What do you mean by "wait for the initial value"? 

 

After thinking about it more, I believe that maybe you're saying that you want the very start of the timeline to show your element's original state (so if you pause(0) all the characters would be opacity: 1), but then almost immediately after the playhead starts moving away from the very start, opacity jumps to 0 and then stagger-fades them in. Is that correct? 

 

If so, here's how you could do that: 

See the Pen BaPXvZz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?