Pause timiline

[SraRushmore]

 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");    

 

[Carl]

When building the timeline you can test to see if i is true and then use addPause() if yes.

 

See the docs for addPause()

[Carl]

Oh and I just remembered I have a blog post showing the most common follow-up question: "How do I pause for a specific amount of time".

 

It's from one of my premium GSAP courses but free below:

 

https://www.snorkl.tv/pause-a-greensock-timeline-for-a-specific-amount-of-time/

[SraRushmore]

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");    

 

[mikel]

 

Hey @Rushmore,

 

I am not sure what exactly you want to achieve.

Please have a look at the docs for .addPause() .
Here's an example

 

See the Pen 15780caeb430acab3fff5eeb261c203a by mikeK (@mikeK) on CodePen.

 

Happy pausing ...

Mikel

 

[Carl]

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.

[SraRushmore]

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");    ;

[Carl]

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.

[SraRushmore]

Ok, thank you very much.

 

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

 

 

[Carl]

this seems to work

 

See the Pen mdPaggN?editors=1111 by snorkltv (@snorkltv) on CodePen.

[GreenSock]

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!