Jump to content
Search Community

onUpdate and immediateRender

gum test
Moderator Tag

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

I've come come across a strange behaviour that I would like to understand. It might be bug, but I'm not sure.

 

When setting immediateRender to true I would have guessed that onUpdate would also fire once during that initial render, but it seems to depend on the type of tween involved.

 

.to fires the onUpdate while .from and .fromTo doesn't.

 

Example:

var obj1 = {a: 0};
var obj2 = {a: 0};
var obj3 = {a: 0};

// logs "update1"
TweenLite.to(obj1, 1, {a: 1, onUpdate: function() {
	console.log("update1");
}, immediateRender: true, paused: true});

// logs nothing
TweenLite.from(obj2, 1, {a: 1, onUpdate: function() {
	console.log("update2");
}, immediateRender: true, paused: true});

// logs nothing
TweenLite.fromTo(obj3, 1, {a: 0}, {a: 1, onUpdate: function() {
	console.log("update3");
}, immediateRender: true, paused: true});

See the Pen mVOKPw by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi gum,

 

Welcome to the GreenSock forums. Thanks for taking the time to make the demo that was very easy to follow. 

 

I do not know the inner workings of the engine well enough to give you a definitive answer but my best guess is that the from() and fromTo() tweens are working correctly. Since those tweens are paused their progress is not advancing and thus no onUpdates are firing. By setting immediateRender to true its forcing the "start" values of those tweens to be set immediately without any progress being made.

 

I added the following logs to the pen to show that all tweens make no progress and that obj2 and obj3 have their starting values changed to 1 immediately (via immediateRender)

 

console.log("tween1.progress() = " + tween1.progress());  // 0
console.log("tween2.progress() = " + tween1.progress()); // 0
console.log("tween3.progress() = " + tween1.progress()); // 0
console.log("obj2.a = " + obj2.a); // set to 1 immediately
console.log("obj3.a = " + obj3.a); // set to 1 immediately
With that being said, the remaining unknown is "why is the to() tween firing an onUpdate when it is paused and no progress is being made?"
 
I don't know for sure, but keep in mind that setting immediateRender on a to() tween is sort of unconventional and off the top of my head I don't know of a use case where it would be necessary. In a to() tween the starting values are the existing values so rendering (or setting) them immediately would have no effect.
 
There may be a good reason why setting immediateRender:true on the to() tween is causing the onUpdate to fire, or it may be a bug. We will definitely get back to you with a definitive answer. 
  • Like 3
Link to comment
Share on other sites

Thanks for the reply!

 

I agree that setting immediateRender on a to() tween doesn't make sense. I only found that behaviour when trying to figure out why my fromTo() tweens didn't fire the onUpdate event like I assumed it would.

 

It makes sense to me that the onUpdate would be called once when immediateRender is set to true. At least when the "start" values forces changes onto the tweened object. And it would have saved some extra bulk in my current project. But I get the logic behind it not working like that as well.

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...