Jump to content
GreenSock

elegantseagulls

position-based staggers helper function issues

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

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