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

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

• 2
##### 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.

• 2
##### 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

• 1
##### 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.

• 4
• 1
##### Share on other sites

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

Thanks Jack.

• 1
• 1
##### 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.

• 2
##### 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

• 4

## Create an account

Register a new account