Cycle stagger from middle with even and odd number of elements

[PointC 8,599 Likes (Superhero)]

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.

 

[Carl 9,066 Likes (Superhero)]

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.

[Visual-Q 586 Likes (Leader)]

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

 

[GreenSock 8,117 Likes (Superhero)]

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. 

[PointC 8,599 Likes (Superhero)]

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

 

Thanks Jack. 

 

[Visual-Q 586 Likes (Leader)]

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.

[OSUblake 9,990 Likes (Superhero)]

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