Jump to content
Search Community

Calculate stagger time using recent() inside timeline

rgfx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

@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

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

  • Like 1
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.
×
×
  • Create New...