Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rushmore

Pause timiline

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 post
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 post
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 post
Share on other sites

What I'm trying to do is stop the timiline depending on whether the initial variable is true or false. At a specific point.

With the least possible cod.

 

Why is it, for example, wouldn't be possible?

tl.paused(false,  "frame1");    ;

Link to post
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 post
Share on other sites

Ok, thank you very much.

 

I'll use call() and evaluates the value of i.

 

 

  • Like 1
Link to post
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 post
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.

×