How do I pause my timeline at a particular point?

[bobdobbs]

I'd like to pause my timeline at a particular point. How do I do this?

 

This is the code I have so far.

http://hastebin.com/soqelufado.pl

 

The code repeats, but I'd like to pause it before it repeats.

I figure that I should do this my providing a parameter to the final tween, which currently looks like this:

 

.

to( $(els).eq(2), 2,
            { left: 0,
               delay : 3
             }
   )

So, how do I make this tween pause after it runs?

Also, if I'm right, and there is documentation for this. where is it?

 

Thanks.
 

 

[Rodrigo]

Hi,

 

One way would be to add a call() method at the timeline's end, that is after the last tween:

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

tl
    .to( $(els).eq(0), 2,
    {
        left : 0,
	delay : 2
    })
    .to( $(po), 1,
    { 
        autoAlpha : 0,			   
    },  "-=2")
    .to( $(els).eq(1), 2,
    {
        left : 0,
        delay : 3
    })
    .to( $(els).eq(2), 2,
    {
        left: 0,
        delay : 3
    })
    .call(pauseLine);

function pauseLine()
{
    tl.pause();
}

You can see it working here:

See the Pen hpEru by rhernando (@rhernando) on CodePen

 

Here you can check the docs for TimelineMax as well for the rest of the engine's functions, plugins and utils:

 

http://api.greensock.com/js/com/greensock/TimelineMax.html

 

Hope this helps,

Rodrigo.

 

Hope this helps,

Rodrigo.

[jamiejefferson]

There's actually a relatively new function in GSAP that handles pausing the timeline:

addPause(position:* = +=0, callback:Function = null, params:Array = null, scope:* = null):*

// Inserts a special callback that pauses playback of the timeline at a
// particular time or label. This method is more accurate than using a
// simple callback of your own because it ensures that even if the virtual
// playhead had moved slightly beyond the pause position, it'll get moved
// back to precisely the correct position.

However, I have a suspicion you might not mean pause the timeline and stop playback, but want to add some 'buffer' at the end before the repeat happens? In that case you can use the repeatDelay property of TimelineMax, or you could insert an 'empty' tween at the end of the timeline to artificially increase it's duration:

// wait 2 seconds before each repeat
var tl = new TimelineMax({ repeat: -1, repeatDelay: 2 });

// or

// add 2 seconds to the end of the timeline where nothing will happen
tl.set({}, {}, "+=2");

See the Pen FuGBx by jamiejefferson (@jamiejefferson) on CodePen

The full API is accessible at http://api.greensock.com/js/ (it's called Docs in the website navigation)