this.target inside onCompleteAll in timelinemax staggerTo

[Thiago Kadooka]

im tyring to use the "this.target" inside the "onCompleteAll", in the "TimelineMax.staggerTo", but it dosnt exist, is it possible?

[Shaun Gorneau]

Hi @Thiago Kadooka, 

 

I'm unsure if you are having trouble with the onCompleteAll parameter .. or if the issue is somewhere after you call the function in that parameter. Have a look at this CodePen. Note ... this.target will will return the last tween element.

 

See the Pen rRxNRp?editors=1011 by sgorneau (@sgorneau) on CodePen

 

[PointC]

stagger creates an array of TweenMax instances. As @Shaun Gorneau mentioned, this.target will return the last tweened element when using TweenMax. If you have the stagger in a timeline, this.target would be undefined in onCompleteAll. 

 

If you're trying to target a specific element of the tweened array you may want to just use onComplete which will fire when each element finishes. If you're trying to target all the elements in the tweened array after they all finish, you may want to just add another tween to the timeline right after the stagger tween.

 

I'm just throwing out ideas without knowing what you're trying to do. If you could put together a demo, we could offer the best advice.

 

[Thiago Kadooka]

i guess im confused about how timelines works. im not that used to them yet...

 

See the Pen BbjxOW by tochjunin (@tochjunin) on CodePen

what im trying to do, is using the onCompleteAll from the TimelineMax().staggerTo(). The one from TweenMax.staggerTo() works just fine.

i can achieve what i want with lots of different ways (including the solution from craig, thanks for the idea).

but im trying to understand the difference in structure when you call a staggerTo, and use the onCompleteAll, with a timelinemax and a tweenmax.

[Carl]

Thanks for the super clear demo.

 

Yes, there is a significant difference between how staggerTo() works on TweenMax and how it works on a Timeline (which probably isn't obvious to most users).

 

From the docs:

 

TweenMax

https://greensock.com/docs/TweenMax/static.staggerTo()

staggerTo() simply loops through the targets array and creates a to() tween for each object and then returns an array containing all of the resulting tweens (one for each object).

 

TimelineLite / Max

https://greensock.com/docs/TimelineMax/staggerTo()

staggerTo() simply loops through the targets array and creates a to() tween for each and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the onCompleteAll (if you define one) and then appends that TimelineLite to the timeline (as a nested child).

 

So to further dig into your mystery its important to know what this is inside your function.

 

If you console.log(this) for the TweenMax you will get the last tween, which means this.target is the target of the last tween.

 

If you console.log(this) for the Timeline you will get a timeline (which is the new TimelineLite mentioned above). Timeline's don't have a target, which is why you are seeing undefined.

 

Hopefully this helps you better understand what is happening. Again, its not something most people will pick up on in the first few weeks or even months of using GSAP.

 

If you want to get the last target in a TimelineMax.staggerTo() you can use:

 

new TimelineMax().staggerTo(".square",1,{y:30},0.1,0,function(){
  console.log("With TimelineMax");
  console.log(this.getChildren()[this.getChildren().length-1].target);
});

 

See the Pen ZPQwLP?editors=0011 by GreenSock (@GreenSock) on CodePen

 

 

 

[PointC]

Stagger school is in session. Professor @Carl is dropping knowledge. 

[Thiago Kadooka]

ha! this make so much more sense now.

thx for all the help!