kendo

http://codepen.io/dunnington/pen/jshmi I managed to get this working properly. I basically calculate an initial x/y point based on the calculated height of the container and the icon, adding 25px to the y value to account for the +=25 I add to the height during the animation, then calculate the final x/y values for each icon in a loop, using its index to determine the offset I want. It doesn't do anything on window resize, which is fine, since it looks good down to a certain point, but a simple "min-width" takes care of that problem. It's complicated, but not nearly as complicated as I was worried it would be. Time to go brush up on my trig and geometry, I think ...

I think I need to do something with x/y coordinates, since I do need the transition to 'lined up' state to be smooth. I updated the CodePen to reflect a cleaned up version of what I was working with before (lines 9-33). It basically uses the container to figure out where the first x/y position should be, then calculates the difference between the block's current x/y and the desired x/y based off the center position. This is a pretty ugly, and not really functional solution, but it *kind of* works, sometimes, with extra tweaking.

Thanks for the reply, ! I did try the 'zero width/height' route, unfortunately it's not really the desired effect I'm going for. I don't think I explained the end result very well, so here's a rough picture illustrating the desired effect (I just manipulated the matrix values until it looked about right. Mostly.) I need the 4 blocks lined up like this, though properly centered and spaced. Ideally, I'd be able to move them into another container and let the browser handle placement and spacing, but I can't think of a way to do that without causing them to 'jump' or trigger some layout nastiness in the process.

Hey there, I was a longtime GSAP user on AS3, and now am happily using it on a JS project (and hopefully many future JS projects.) I'm trying to figure out two problems right now. 1. In the attached codepen, at the end of the animation, I've got 4 visible blocks (out of 15) that I need to line up with one another, so they are horizontally centered in their container. I can't position them absolutely, so I need to calculate the relative offset, based on the center of the container, to animate them to. The fact that they change height during the animation also means that I can't safely calculate this position at the beginning.s 2. Related, what's the best way to handle dynamic properties? For example, should I create the movement tween above after the timeline finishes? And what's the recommended way to handle window resizing, which would necessitate recalculating the positions again? I realize that some of the problem stems from CSS, so if anyone has any suggestions on the CSS in the code snippet as well, I'd love to hear them. BTW - I'm using ScrollMagic as well, but the issue is the same if I remove that. Thanks in advance for any help/suggestions! I've been really impressed with GSAP on JS.