TimelineMax: Controlling Playback

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…Read the full article on Tuts+

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview: