Tween Elements in a Collection with Delay for those Elements

[BigSmalls 0 Likes (Newbie)]

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!

[Carl 9,066 Likes (Superhero)]

Not exactly sure I follow exactly.

Maybe this will help

var baseX = 100;
var tl = new TimelineLite()
.to(".box", 2, {borderRadius:"50%"}, "circle")


$(".box").each(function(index, element) {
  tl.to(element, 0.5, {x:baseX + (index*25)}, "circle+=" + index * 0.2)
})

http://codepen.io/GreenSock/pen/dwKij?editors=001

 

Here are instructions on how to create a GSAP-enabled CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ 

[BigSmalls 0 Likes (Newbie)]

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.