Loop within scrubbing timeline

[spacewindow 5 Likes (Newbie)]

Hey guys, seems like this should be basic and I'm missing something.

 

I want to create a looping timeline, which can then be made a child of a main timeline. When main timeline is scrubbed the looping timeline in parallel with the main timeline.

 

1. ie I have a 1 second loop.
2. My main timeline goes goes for 3.5 seconds, but is paused so I can control it through scrubbing.
3. I embed the loop in my paused main timeline.
4. When I scrub the main timeline forward, the loop should have played 3.5 times (eg will end half way through), and pause.

 

Do you remember the old days of flash, where you could create a looping animation, add it to another timeline and and set it to Graphic, which would allow you to see all looping elements in the same timeline/ scrub back and forth? That's what I want to do!

 

Thanks

See the Pen PJxKEz by spacewindow (@spacewindow) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @spacewindow

 

When you add an infinitely repeating nested timeline to your master, your master will now infinitely repeat. If it were me, I'd leave the red ball timeline on its own and set its time based on the time of the master as you scrub it. Something like this:

 

See the Pen gGQXbd by PointC (@PointC) on CodePen

Does that help at all?

 

Happy tweening.

 

[spacewindow 5 Likes (Newbie)]

Wow that's a bit clever @PointC.

 

Would not have thought of doing it that way, think that is going to work. If you don't hear from me again that solution has gone into production!

 

Thanks for your prompt assistance.

[spacewindow 5 Likes (Newbie)]

@PointC I realised that I set up my example a bit incorrectly, sorry.

 

It's actually the Timeline that is meant to repeat infinitely, whereas in my last example It was a single tween within a Timeline.

 

I managed to do what you suggest, but had to add my ballRed timeline into another timeline (loops) then tweened loops.time() to achieve the same effect.

 

This seems a bit complicated, even though I'm glad I got it working. I even added an extra timeline to the loops timeline and it all worked pretty well.

 

Wonder if you, or anyone, can make a simpler example, or explain further. 

 

See the Pen MEzGwv by spacewindow (@spacewindow) on CodePen

 

Edited October 17, 2017 by spacewindow

[PointC 8,599 Likes (Superhero)]

o.k. - if the timeline is repeating, we just need to change from setting the time() with the scrubber to setting totalTime(). That would then include repeats and delays whereas time() does not. Here's a fork of your pen in which I commented out the loops timeline and just used the repeating redBall timeline controlled with the scrubber and based on the time of mainTL.

 

See the Pen BwGXYz by PointC (@PointC) on CodePen

Does that help?

 

Happy tweening.

[spacewindow 5 Likes (Newbie)]

Thanks again PointC. Nice.