Jump to content


How do I pause my timeline at a particular point?

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'd like to pause my timeline at a particular point. How do I do this?


This is the code I have so far.



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?




Link to comment
Share on other sites



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

    .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

function pauseLine()

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:




Hope this helps,



Hope this helps,


  • Like 1
Link to comment
Share on other sites

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)

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