1. Web Design
  2. TimelineMax

TimelineMax: Controlling Playback With addPause()

This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: An Introduction to Tweening
TimelineMax: Getting a Handle on Bézier Tweening

In this tutorial we’ll learn how to control animations, on demand, using a method called addPause(). Ready? Set? … slight pause … Let’s go!


The addPause() method is a control method which allows developers to place a pause anywhere on their timeline. It’s far more precise than using a callback function which pauses another function (something which was necessary prior to addPause() existing).

This control method can also insert a special callback that pauses playback of the timeline at a particular timestamp or label. Doing so helps ensure that if the virtual playhead moves slightly beyond the pause position, it'll get moved back to the precise spot.


The syntax for addPause is straight forward. Just as we write other methods like .to(), the .addPause() method is written similarly and accepts arguments which can be passed inside the parentheses. If you're not familiar with methods then head on over to my other GreenSock-focused article exploring the mechanics of GSAP and I’ll wait here for your return.

Pausing at a specific point

Adding the code above will pause your animation exactly at the 2 second mark of the timeline. If you're unsure what a timeline is and how to instantiate one then you should read a previous article I wrote on beginning with TimelineMax.

Inserting a pause with a label

You can also insert a pause in relation to labels. If you’ve been reading along you might recall we spoke about labels back in the mechanics article.

Now when your timeline encounters the label “yourLabel” a pause will be inserted at “yourLabel.”

Inserting a pause with a label and time interval

This example will insert a pause 3 seconds after “yourLabel” and, when that pause occurs, a call to yourFunction will take place.

Inserting a pause with a label, time interval and passing parameters

If you’d like to insert a pause at exactly 4 seconds, then call yourFunction, pass it two parameters, param1 and param2 and finally bind the current scope to the callback, you can do that like so:

Demo Time!

Here are some fun examples to get your feet wet inserting pauses for a timeline. The challenge for you is to take each approach I’ve previously mentioned and attempt to implement them yourself.

Linear Control

To start here’s a great example, based on a demo from Carl Schoof, which explains a linear approach and a perfect representation of typical usage with the addPause() control method.

A typical usage of addPause() is to break up a linear experience into multiple sections:

Each time you hit the next button the timeline will play() until it hits the next addPause() point.

Bubble Emitter

Here’s a demo I made called “Bubble Emitter” to experiment more with pause insertions at your leisure. Click it!

On line 90 of the JavaScript panel look for this commented out line:

Uncomment this and interact with the demo to see the addPause method take place during the animation’s playback. Hint: the animation will pause 0.25 seconds into the animation sequence.

I’ve also left some comments in this demo (thanks to Jack Doyle’s help) explaining how to make this effect even more performant!

SVG Download Progress

This SVG demo by Chris Gannon is an awesome example showcasing the DrawSVG plugin and is great for exploring addPause. You can also use addPause to discover each of the motions Chris employs to make the effect come to life.

Try adding this snippet to line 26 of the demo’s JavaScript panel.

As I previously mentioned Chris' demo uses the drawSVG plugin which we looked at in a previous article. For those not familiar, DrawSVG is a particularly useful plugin to help animate strokes of an SVG and I highly encourage you to explore it further when you have the time.

Diving SVG Animation

Simply because Chris' stuff is so good, how about we add some pauses to another of his demos? This one’s perfect:

If you fork this demo, then erase all the JavaScript Chris has written, you’ll see the entire SVG and how he used the DrawSVG plugin to create this sequence.

This is the SVG graphic

To begin our experiment, add the following snippet to line 60 of the JavaScript panel of the CodePen demo:

Did you notice the animation pausing at 1.15 seconds into the movement? Pretty cool huh?

Now for the next trick. Replace lines 44-47 with the following, to add a label to the timeline:

With the code above in place, add the following snippet around line 60 to finalize our experiment. Watch the animation pause exactly at the “archesLabel” we defined prior.

Extra Credit: Toggle Button

Having covered the addPause() method and played around with it on a number of demos, it’s time to see if you can apply it. Learning how to make a simple play/pause toggle button to control any GSAP animation (tweens or timelines) can be pretty handy, especially when you’re trying to learn a particular/approach and/or technique.

In the video below Carl Schoff walks through the basics and explains how to make the toggle button in the demo.

Next Time

In our next GreenSock adventure we’ll learn what bezier tweening is all about! We’ll investigate what a bezier path is and look through some example demo’s showcasing how to animate along a bezier path. Until next time happy animating!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.