Looping Master or Scene and restoring original position of elements

[Sixtus]

I try to loop a complete header animation endlessly, but I just cannot get it to work.

I tried to loop the master like this: 

    var master = new TimelineMax({repeat:-1});

Then I tried the same solution on the single scene I'm using:

      function sceneOne() {
        var tl = new TimelineMax({repeat:-1});

I also tried several solutions with **oncomplete callbacks**.

I finally had some experiments with

    timeline.seek(0).pause();
    timeline.pause(0); //shortcut for the line above
    timeline.progress(0).pause();
    timeline.totalProgress(0).pause();
    timeline.restart(0).pause();

inside my scene. Didn't help.

Can somebody point me in the right direction? I cannot find any error in my code. It's my first animation with GSAP and SVG ever, so I feel like overlooking something obvious. Any hint would be much appreciated!

See the Pen jwXGqd by Sixl (@Sixl) on CodePen

[GreenSock]

From a cursory glance, it looks like the problem is that you're creating a timeline that has infinitely repeating animations inside of it, and then placing that timeline into a master timeline that you want to repeat. That's fine, but since the child timeline is infinitely long, the parent/master timeline will never have a chance to repeat (it never reaches the end to then start over again). 

 

You'd need to either not infinitely repeat the nested stuff, or you could just figure out where you want things to wrap/repeat in the master, and drop a callback at that spot that'd restart() it. 

tl.call(repeat, 20); //at the 20-second spot, restart timeline
function repeat() {
    tl.restart();
}

 

[Sixtus]

Thank you so much for your help!