Jump to content


Tween Elements in a Collection with Delay for those Elements

Moderator Tag
Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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

  • Solution

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)



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.