Repeat calls to animation in a javascript function

[SteveJC]

Hi, I want to create an animation that is run when a button is pressed. In the codepen link I have an animation that works. An image of a boy is first moved and then rotated. The boy is rotated twice using repeat: 1 in the tween that does the rotation. The good thing about it is that the button that calls this function can be pressed again and again and the animation works just fine.

 

However, it I want to repeat the entire timeline, not just the rotation tween, so I changed the code to have the repeat: 1 in the constructor of the timeline. The first button press is fine: the entire animation runs with the 'move and the rotation' run and repeated once. But, when the button is pressed again nothing happens.

 

How I can repeat a timeline which is run by clicking on a button and have it work each time the button is pressed?

Can you explain what I am doing wrong please?

 

See the Pen vYrjNMM by SteveJohn (@SteveJohn) on CodePen

[Cassie]

Hey there @SteveJC,

Maybe this is what you're after?

See the Pen jOKxMmw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Using timeline control methods?

Let me know if I misunderstood. 💜

[SteveJC]

Cassie, that’s perfect! Thank you so much for your super speedy reply. It is just what I wanted. Animation runs on every click and the whole animation contains a repeat. Excellent. Thank you very much. 😊

[Cassie]

Hooray! Glad to have helped