Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BigSmalls

Tween Elements in a Collection with Delay for those Elements

Recommended Posts

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!

Link to comment
Share on other sites

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/ 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×