Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PointC

Cycle stagger from middle with even and odd number of elements

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 post
Share on other sites

Hey Craig,

 

I'm waiting for the smart folks to show up :)

Love all the demos and the clear progression.

 

I remember this solution from Diaco, was one of my personal favorites. Its a great effect.

  • Like 2
Link to post
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 post
Share on other sites

I think something like this would work:

 

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

 

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

  • Like 4
  • Thanks 1
Link to post
Share on other sites

Perfect! That's the secret recipe I was looking for. Made with 7 GreenSock herbs and spices. 

 

Thanks Jack. 

:)

 

  • Like 1
  • Haha 1
Link to post
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 post
Share on other sites

Here's a fun little entrance. I'm scaling everything from the same point. You need to open it on Codepen to see the full effect.

 

See the Pen WgVrVY by osublake (@osublake) on CodePen

 

 

 

  • Like 4
Link to post
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.

×