Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thiago Kadooka

this.target inside onCompleteAll in timelinemax staggerTo

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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.

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

  • Haha 2
Link to comment
Share on other sites

  • 2 weeks later...

ha! this make so much more sense now.

thx for all the help!

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