What's the proper way to use stand alone animation that is supposed to play throughout the timeline alongside with chained animations?

[LipstickVoid 3 Likes (Newbie)]

I have a group of animation that would be executed one after the other which is perfect to do with timeline and its labels but I also want to add on a single repeating animation that would be playing throughout this whole timeline and would end when the timeline ends. When I added this stand alone animation inside the timeline in the first label, everything else waited for it to finish playing. It still happened even if I put it at the top before the chain animation with labels and without using any labels to calculate the timing.

 

Of course, I can choose not to use labels at all and calculate the time needs to be added in between all the animations manually but that would defeat the purpose of using the timeline in the first place.

 

//want to repeat this sprite throughout the whole timeline
timeline.to('.repeating-animation', 1.2, {
  repeat: 4, //anyway to calculate this automatically so that it stops when the timeline ends instead of giving a fixed value?
  backgroundPosition: "-10px 0",
  rotation: 0.01,
  ease: SteppedEase.config(5)
}, "0") //starts at the beginning

//followed by chained animation 
//but everything down below waits for the reapting animation above to be finished before executing
.addLabel("label1")
.from('.sample', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label1+=0.5")

.addLabel("label2")
.from('.sample2', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label2+=0.5")

.addLabel("label3")
.from('.sample3', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label3+=0.5")

//and so on

 

I'm wondering

- if there is a cleaner proper way to play this repeating animation throughout the timeline.

- if there is a way to make the number of times being repeated to be dynamic to total length of the timeline? So, it stops when the timeline ends?

 

Thanks in advance!

[PointC 8,599 Likes (Superhero)]

Hi @LipstickVoid 

 

You could calculate the repeats by dividing the duration of the main timeline by the duration of the repeating tween/timeline (without the repeats). They may not end at exactly the same time though.

 

I think adding an onComplete callback to the main timeline would be the easiest approach. Set the repeating timeline repeats to -1 and then use your main timeline onComplete to pause or kill that repeating timeline. 

 

Does that help? Happy tweening.

[LipstickVoid 3 Likes (Newbie)]

On 6/20/2018 at 11:20 PM, PointC said:

Hi @LipstickVoid 

 

You could calculate the repeats by dividing the duration of the main timeline by the duration of the repeating tween/timeline (without the repeats). They may not end at exactly the same time though.

 

I think adding an onComplete callback to the main timeline would be the easiest approach. Set the repeating timeline repeats to -1 and then use your main timeline onComplete to pause or kill that repeating timeline. 

 

Does that help? Happy tweening.

 

Yes, it does. Thank you.