Jump to content
Search Community

Looping Master or Scene and restoring original position of elements

Sixtus test
Moderator Tag

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

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

Link to comment
Share on other sites

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();
}

 

  • Like 5
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.
×
×
  • Create New...