Basic timeline control

[Cazza]

I need just one of these animations to be run at a time, as an either/or, controlled by the user.

 

Start by running Timeline A (repeating to infinity).

 

When button B is clicked Timeline A to stop and Timeline B to start animating, repeating infinite times again.

 

When Button A is clicked I would like Timeline B to stop and Timeline A to start animating.

 

I just can't get the logic right. Is it easier to use two separate timelines or do I need a master timeline and labels?  

 

This is a simplified codepen and in the real situation I can't rely on the length of time any of the timelines take to complete as they are dependant on user interactions.

 

Thanks for any help! 

 

See the Pen oNjmbOv by cazzac (@cazzac) on CodePen

[Shaun Gorneau]

Hi @Cazza,

 

Rather than create two functions constructing/modifying the same timeline, it would be better to create two timelines and allow your button clicks to control the playback of each.

 

If you have more than two interactions that need to be accounted for, there are other things we can do ... but to solve your issue here, have a look at this CodePen.

 

See the Pen XWmOjdZ by sgorneau (@sgorneau) on CodePen

 

Happy Tweening!

 

Shaun

[Cazza]

Thank you @Shaun Gorneau 

 

This is a massive help! I'll try and apply your suggestion to my scenario. Hopefully that's all I need to get it back on track, but I'll come back to these helpful forums if I get stuck again 🥰

 

Cazza

[Shaun Gorneau]

51 minutes ago, Cazza said:

Thank you @Shaun Gorneau 

 

This is a massive help! I'll try and apply your suggestion to my scenario. Hopefully that's all I need to get it back on track, but I'll come back to these helpful forums if I get stuck again 🥰

 

Cazza

 

Happy to help!