Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kreativzirkel

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

Recommended Posts

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 :D, 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.)

 

Link to comment
Share on other sites

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.    
   

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

2 minutes ago, determin1st said:

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

 

onUpdate happens right AFTER the tweening values get updated.

  • Like 2
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.
×