Understanding this in "onUpdate"; difference between TweenMax and TimelineMax

[katerlouis]

For my sprites I do the following:

 

// my own sprite object, don't bother this one
// all you need to know is, that .set() selects a frame
var mySprite = new Sprite(...); 

TweenMax.fromTo({}, 1, { frame: 1 }, { frame: 10, roundProps: "frame" })
	.eventCallback("onUpdate", function() {
  		mySprite.set(this.target.frame);
	})

 

This works nicely , since "this" in a TweenMax's onUpdate returns the tween.

 

If I want to do the same inside a timeline, "this" refers to the timeline, and not the current tween. 

 

var tl = new TimlineMax()

	.to(".someStuff", 1, ...)
	.to(".moreStuff"...)

	.to({}, 1, { frame: 1 }, { frame: 10, roundProps: "frame" })
		.eventCallback("onUpdate", function() {
          	// not working :'(
          	// "this" refres to the timeline, not the current ".to" tween
          	mySprite.set(this.target.frame)
        })

	.to(".tooMuch"...)
	.to(".stufffff"...)

 

 

So the actual question is:

How can I access the tweened values in the second scenario? Maybe you could shed more light into how and why it works this way.

 

 

 

(I know there are other ways to handle Sprites; steppedEase etc. – but this actually doesn't influence my question.)

 

[Carl]

TweenMax.fromTo() returns the actual tween so when you method-chain an eventCallback to a to() tween it gets applied to the tween: https://greensock.d.pr/foC62L

 

TimelineMax.to() is a method that inserts a tween into a timeline and returns the timeline. Adding the eventCallback as you are in your scenario to applies the eventCallback to the timeline because it is what the previous .to() returned. https://greensock.d.pr/6ccz0y

 

Similarly if you chain a duration() to the end of a timeline it will affect the timeline not the last tween.

 

var tl = new TimelineMax()

     .to(".someStuff", 1, ...)
     .to(".moreStuff", 4 ...).duration(8)

 

the tl will will have a duration of 8, not the last tween

 

 

It seems to me that you should use an onUpdate callback in the vars of the tween.

 

var tl = new TimlineMax()

    .to(".someStuff", 1, ...)
    .to(".moreStuff"...)

    .to({}, 1, frame: 10, roundProps: "frame", onUpdate:yourFunction })

   In these cases it is usually best to provide a demo so that we can have a better sense of what you need to do and experiment with options.    
   

[katerlouis]

Thanks for this detailed description. Makes a lot of sense; slightly ashamed that I didn't realize this myself.

 

Totally forgot about the possibility to use onUpdate in the vars object. Prefer .eventCallback by far– 

But now I'm glad this way exists

 

Hell, I love GSAP.

[determin1st]

Does 'onUpdate' happens after or before the tweening values update?

 

 

[GreenSock]

2 minutes ago, determin1st said:

Does 'onUpdate' happens after or before the tweening values update?

 

onUpdate happens right AFTER the tweening values get updated.