BigSmalls

Thanks! That lead me in the right direction. I didn't know how labeling would turn out with .each(). I pretty much just nuked the problem in my mind. I was updating values (instead of using 'index') using onComplete or call(), not realizing that the values weren't being updated until all the animations were complete, ha. Thanks again for the help.

Hi! This is what I'm trying to achieve: I want to tween a collection of 4 rectangles aligned vertically and transform them into circles. tl.to( $buttons, 0.5, { borderRadius: '50%'}, 'circle' ); // no problem Now I want to shift those circles to the right so that they're aligned diagonally while the circle transformation above is happening, hence the label 'circle'. Ideally, something like this: tl.to( forAllElementsIn( $buttons ), 0.5, { x: x+displacement, delay: 1, onComplete: function () { displacement+=25 }, 'circle' ); The delay would be because I want one circle to move right then circle2 then circle3 and then circle 4 to form a diagonal alignment. Is there a simple way to do this? I thought of just using a for-loop: for ( btn in $buttons ), but I don't know how the labeling will work out with tweens outside of that for loop. Thanks for the help!

Help plz. Inner block jumps to a horizontal alignment without animating itself there. Initially I was running both animations simultaneously and so I thought that perhaps the inner block may not know the horizontal dimensions to calculate margin auto if the outer block is animating its 'left' attribute, but it turns out that the animation doesn't work even after the outer block finished animating. Thanks for the help!