Timeline : How to initialize my timeline with the good progress state for my elements

[Michaël Garcia]

I create a timeline who scales my elements with a delay of 1 second.

It works great but I'd like to see all my elements already scale at the good progress when I start my timeline.
Is there a way to do so ?

 

Indeed as you can see in my codepen, I have to wait the first round to end to have all my elements in the good progress.

 

Thank you very much

See the Pen yLrRNYV by johnndoe (@johnndoe) on CodePen

[GreenSock]

Sure, just set the tl.time() to whatever you want, like 4 seconds: 

See the Pen JjwwJEZ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Also, you could greatly simplify your code to this using a stagger: 

See the Pen RwEEgKO by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 👍

[Michaël Garcia]

It really helps thank you !

Also I didn't went with a stagger solution because I'd like to trigger an event each time one of my shape completes its transformation. 

Is there a way to do it with your very shorten solution ? So far I added an onRepeat event on each of my tweens.

 

[GreenSock]

Like this?: 

See the Pen dywwQZQ?editors=1010 by GreenSock (@GreenSock) on CodePen

[Michaël Garcia]

Exactly like this yes ! Thank you very much for your example

[GreenSock]

Happy to help. 💚