Calculate stagger time using recent() inside timeline

[rgfx]

So I was thinking I could use recent(); to help me calculate stagger so I could easily create offset on the next stagger without doing any maths. My lack of knowledge of JS is getting me trouble once again. 

 

If you look at my pen you can see what am trying to do. I feel that the solution to this issue is really going up my GSAP game. Just not sure how I ask google this question. So here I go again.

 

 

See the Pen xrKLRQ?editors=1010 by rgfx (@rgfx) on CodePen.

[Carl]

I'm not exactly sure what you want to do but if you want the second stagger to start 1 second after the first stagger begins, you can put a label on the first one and then insert the second stagger relative to that label like so.

 

var tl = new TimelineMax({repeat: -1});
  tl.staggerTo(first,1,{y:-15, ease:Elastic.easeOut.config(1.1, 0.4)}, .2, "label")
    .staggerTo(first,1,{y:0, ease:Elastic.easeOut.config(1.1, 0.4)}, .2, "label+=1")

 

See the Pen eROGJo?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

 

Just a tip: It helps if you just explain "I want the second stagger to start 1 second after the first one starts" or something like that as reading code that doesn't work isn't as clear.

 

let us know if you need something different.

 

[rgfx]

Thought my title explained what I wanted to do, and my code explain how I was trying to do it.  Sorry for the inconvenience. 

 

Your method was what I needed, thanks. 

[Carl]

Cool. No worries. Keep your eyes open for our 1.19.2 release. There is a new feature that will allow you to do this effect with just one staggerTo.

[rgfx]

@Carl still need some help with the stagger timing.

 

I am trying to calculate total length the previous stagger. Then subtract the length of the first tween inside the first stagger, so the second stagger starts when the first object ends its animation. 

 

I tried adding a negative to your label idea but it broke. 

 

What am trying to do is something like this. 

See the Pen xrKPPP by rgfx (@rgfx) on CodePen.

 

 

So the total of the first stagger is 1.8.  then subtract 1 so the offset of the second stagger would be .8

 

Hope you get it. 

[Carl]

These calculations should dynamically produce the values you described:

 

console.log("duration of first tween in previous stagger = ", tl.recent().getChildren()[0].duration()) //1
var stagger = tl.recent().duration() - tl.recent().getChildren()[0].duration();

 

See the Pen xrKPPP?editors=0011 by rgfx (@rgfx) on CodePen.

 

[PointC]

I'm not sure where you're going with this project, but thought I'd throw out another option. For this type of animation you could also loop through your NodeList and offset the tween/timeline start times via the index of the element. Something like this:

 

See the Pen NgKwLq by PointC (@PointC) on CodePen.

 That may or may not be of any use to you, but thought I'd mention it.

 

Happy tweening.

[rgfx]

@carl  think you may of embedded the wrong Codepen. Note that this stagger is the middle a long timeline, I find myself using stagger in this way a lot, it would be nice just to reuse a function. 

 

Hope you don't think am being ridiculous in this request "why doesn't he just do the math"  

 

 

See the Pen EXYoXd by rgfx (@rgfx) on CodePen.

 

[rgfx]

@PointC My current use of stagger bring object into scene from left and the bounces them out  to the right.  I learned from that code and will use it for other stuff for sure, thanks. 

[Carl]

Sorry about that. Here is proper pen:

 

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

 

Don't worry, you shouldn't have to do the math, the API has enough hooks to get what you want.

[rgfx]

Sweet! thanks man,

[rgfx]

@Carl

 

Still struggling pal, as mentioned before my staggers are in long timelines. Can I do this without creating separate timelines? Like so?

 

See the Pen JJPvpz by rgfx (@rgfx) on CodePen.

 

[Carl]

The problem is you are trying to assign a value to the stagger value before the timeline is even created.

 

You need to assign the stagger value immediately after the first staggerTo() is added. That's why I created my stagger variable in the middle of the timeline. recent() needs to be called immediately after the animation you are trying to inspect is created. 
 

.staggerTo(first, 1, { y: 30 }, 0.2)
var stagger = tl.recent().duration() - tl.recent().getChildren()[0].duration();
tl.staggerTo(first, 1, { y: 0 }, 0.2, "-=" + stagger)

 

That code will work regardless of how long the timeline is that you are working with or where the first stagger is placed.

 

 

[rgfx]

Ok, I get it. Thanks.