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!