Animate blocks one by one

[markilfin]

I have three elements - el1, el2, el3. My goal is to animate these 3 elements: el1 - continuous animation, el2 and el3 - animate them two times one by one. What I mean is el2 passes two full circles of animation then stops, right after this el3 passes two full circles of animation then stops, right after this el2 passes two full circles of animation... and so on.

So I did this in this way

See the Pen fuxqv by anon (@anon) on CodePen

But I'm sure that this is not the right way and I belive that TimelineMax should have a mechanizm to control this type of animation and I just don't know about this.

 

Any help would be greatly appreciated! Thanks! 

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks so much for the CodePen example.

 

This is actually a little tricky, but entirely possible. 

 

I put card 2 and 3 animations in their own timeline and then created another timeline  that contains 

 

-card 2 and 3 timeline

-a single repeating tween of card 1

 

http://codepen.io/GreenSock/pen/sLHDE

[markilfin]

Thank you! Exactly what I was looking for!