TimelineMax: A Primer

What is TimelineMax? What makes it different from other GreenSock Animation Platform (GSAP) libraries? Why would I need TimelineMax over TimelineLite? How do I go about understanding parameters for TimelineMax? If you find yourself asking any of these questions then you’ve come to the right place.

Welcome to the primer for a Tuts+ series discussing TimelineMax by GreenSock. Get ready for an explosive, mind bending series to help mold you into an animation pro

What is TimelineMax?


TimelineMax is a JavaScript sequencing tool which acts as a container for tweens and other timelines, making it easier to control them as a whole and precisely manage their timing. TimelineMax provides methods to allow access to multiple aspects of your animation. It can also dynamically adjust a timeline’s speed at runtime, plus much, much more.

Note: tweening is an abbreviation of inbetweening; creating frames between states in an animation sequence.

TimelineMax extends TimelineLite, offering exactly the same functionality along with additional (but non-essential) features like:

  • repeat
  • repeatDelay
  • yoyo
  • currentLabel()
  • tweenTo()
  • tweenFromTo()
  • getLabelAfter()
  • getLabelBefore()
  • and getActive()

Benefits and Features

TimelineMax allows you, as an author, the power to make tweens overlap on the timeline as much as you desire. As the animation pro, you have complete control over where tweens are placed on the timeline. Most other animation tools can primarily execute a basic one-after-the-other sequencing, but can’t allow tweens to overlap. Imagine appending a tween that moves an object and you’d like it to start fading out 0.5 seconds before the end of that tween? With TimelineMax it’s a great deal cleaner, plus extremely robust to make all that happen.

For convenience, major plugins like CSSPlugin (for supplying CSS vendor prefixes), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin and BezierPlugin are all included within TweenMax, also part of TimelineMax. Whoa! 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…
</code></pre>

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:
    2015/02/17