Jump to content
Search Community

Pause timiline

SraRushmore test
Moderator Tag

Recommended Posts

 it is possible to pause a timeline at a point, with tl.paused(true);

 

Thanks!!!!

 

 

 

for example:

 

i = true;

     tl = gsap.timeline({
        repeat:-1,   
        defaults: { 
            duration: .5,
            ease: "quad.out"
          },
    });

 

    tl.addLabel( "frame1");
    tl.to("#txt1", {opacity:0},  "frame1");    
    tl.to("#txt2", {opacity:1},  "frame1");    

    tl.paused(i);

 

  tl.addLabel( "frame2");
    tl.to("#txt1", {opacity:1},  "frame2");    
    tl.to("#txt2", {opacity:0},  "frame2");    

 

Link to comment
Share on other sites

Thanks, what you suggest to me then is that I do this on my timiline

 

i = true;

     tl = gsap.timeline({
        repeat:-1,   
        defaults: { 
            duration: .5,
            ease: "quad.out"
          },
    });

 

    tl.addLabel( "frame1");
    tl.to("#txt1", {opacity:0},  "frame1");    
    tl.to("#txt2", {opacity:1},  "frame1");    


    tl.addPause( "frame1", function () {
            tl.paused(i)
    });

 

  tl.addLabel( "frame2");
    tl.to("#txt1", {opacity:1},  "frame2");    
    tl.to("#txt2", {opacity:0},  "frame2");    

 

Link to comment
Share on other sites

not exactly. I was thinking you wanted to add the pause when you created the timeline so I would have said

 

if(i){
   tl.addPause()
}

 

if you want to check to see if a pause is needed while the timeline is running, then I would probably just use call(), but if your way is working, then it should be ok. I'd have to test it myself, which I can't do without a demo.

  • Like 3
Link to comment
Share on other sites

paused() is intended to be used outside of a timeline, not in the middle of it. paused() does not get executed while the timeline is running. 

 

 

Again, my suggestion is to use call() to call a function that evaluates the value of i. https://greensock.com/docs/v3/GSAP/Timeline/call() based on the value of i you can pause the timeline or have it keep playing.

  • Like 2
Link to comment
Share on other sites

If minimal code is what you're looking for, here's one other option: 

let shouldPause = true;

let tl = gsap.timeline().to("h1", {x:300})
  .add(() => shouldPause && tl.pause())
  .to("h1", {y:300});

Just beware that when you do this kind of dynamic pausing, the pause may be slightly off time-wise because of the nature of updates. For example, if you place that function call at exactly 1 second into a timeline, remember that the timeline's playhead gets updated roughly once every 16.67ms and if the user's device gets bogged down it may be longer, so perhaps it updates at 998ms (before the pause) and the next update occurs at 1020ms for example - the timeline may actually get paused at a time of 1.02 seconds instead of exactly at 1 second. Normally that doesn't really matter, but I wanted to make sure I pointed it out. 

 

That's one of the reasons we have .addPause() in there to begin with - it forces the playhead to be EXACTLY at that spot even if the update is a bit late. There are ways we could adjust the code above to force that too, but I didn't want to make things overly complex when it probably doesn't even matter. 

 

Happy tweening!

  • Like 3
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...