Jump to content
Search Community

Cycle stagger from middle with even and odd number of elements

PointC 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

Hey everyone,

 

I was staggering some elements from the middle by using cycle and a delay function. Diaco showed me this formula a couple years ago.

 

return Math.abs(Math.floor(yourElements.length / 2) - i) * 0.25;

 

See the Pen NLVwJy by PointC (@PointC) on CodePen

 

This works great for an odd number of elements, but with an even number of elements the middle two should start at the same time so this function doesn't work correctly.

 

See the Pen RYmMrw by PointC (@PointC) on CodePen

 

I came up with a new formula for an even number of elements.

 

return Math.floor(Math.abs(yourElements.length / 2 - 0.1 - i)) * 0.25;

 

See the Pen BOeYab by PointC (@PointC) on CodePen

That seems to work just fine. I'm just using the modulus operator to figure if the element list length is odd or even and then using the appropriate formula to return the correct value.

 

See the Pen JaqxjJ by PointC (@PointC) on CodePen

 

My question is can anyone think of a way to calculate it with one formula whether it's odd or even? I'm thinking I'm gonna need two different formulas which is no big deal, but wanted to make sure I'm not missing something obvious here.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

This sort of does it though the respective lefts and rights of the pairs are staggered, at the very least another option for the effect even thought it's not completely symmetrical.

 

return Math.abs((boxes.length / 2.5) - i) * 0.25;

 

odd

See the Pen yxWmRm by Visual-Q (@Visual-Q) on CodePen

 

even

 

See the Pen jvogJo by Visual-Q (@Visual-Q) on CodePen

 

  • Like 1
Link to comment
Share on other sites

11 hours ago, GreenSock said:

@Visual-Q it doesn't look like the formula you're using delivered the results @PointC was looking for, unless I'm misunderstanding. 

 

Yeah I know it didn't solve the initial problem but it did produce an interesting variation with cycle staggering left right out from center as opposed to symmetrically selecting pairs which I thought was kind of cool. Though with testing I note I have to adjust the number you are dividing by if the number of boxes changes.

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