Jump to content


Loop within scrubbing timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!



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

Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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 by spacewindow
Link to comment
Share on other sites

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.


  • Like 2
  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.