position-based staggers helper function issues

[elegantseagulls]

I'm having some issues with the position-based staggers helper function.

 

It seems that the each (in my example), and ease in both my and the official example are not working (as expected.

EACH: seems like there's more time than should be between each ring in my codepen.

See the Pen PoJgoVX by elegantseagulls (@elegantseagulls) on CodePen

 

EASE: I am getting an error when I comment the ease back in, and

See the Pen PoJgoVX by elegantseagulls (@elegantseagulls) on CodePen

 

 

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

[GreenSock]

Sorry about that, @elegantseagulls - that ease thing looks like a typo in that helper function. It's fixed now. It was calling .getRatio() on the ease but there's no such thing (that's from the old GSAP2 days). 

 

As for the "each", that's behaving as expected. Remember, it's distributing the delays based on the proximity to the edges, thus if you've got 62 elements, each: 0.2 would result in an overall time of 12.4 seconds that must get distributed across them all BASED ON PROXIMITY (not a simple "each" stagger). Many of them are almost the same distance from the center, thus they'd fire almost simultaneously, and then there'd be a longer delay before the next inner-ring starts firing, etc.

 

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

 

If you're trying to make each circle start animating 0.2 seconds apart, starting from the outer circle and going around and then stepping to the inner ring(s), here's a CodePen with some math applied to a custom solution: 

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

 

Here's a slightly different .sort() that makes them all come in by angle instead of outer-to-inner ring. Kinda fun.

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

 

Does that clear things up? 

[elegantseagulls]

Ah! Thanks! I was looking for more of a ripple effect. Using amount basically gets the effect, but I was just hoping for more control.

[GreenSock]

Sure! How about this?: 

See the Pen vYeMzBr by GreenSock (@GreenSock) on CodePen

 

I added a roundDistance optional property to keep the rings synced up (the way your artwork is set up makes some of them in the same ring a bit further than others). 

[elegantseagulls]

17 hours ago, GreenSock said:

I added a roundDistance optional property to keep the rings synced up (the way your artwork is set up makes some of them in the same ring a bit further than others). 

This is awesome! Thanks!