TweenMax

TweenMax is the most feature-packed (and popular) animation tool in the GSAP arsenal. For convenience and loading efficiency, it includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file).

See the Pen GSAP Overview by GreenSock (@GreenSock) on CodePen.

Quick links

Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. You can mix and match TweenLite and TweenMax in your project as you please.

Like TweenLite, a TweenMax instance handles tweening one or more properties of any object (or array of objects) over time.

TweenMax's unique special properties

TweenMax's syntax is identical to TweenLite's. Notice how the TweenMax tween below uses the special properties: repeat, repeatDelay, yoyo and the onRepeat event callback.

//basic illustration of TweenMax's repeat, repeatDelay, yoyo and onRepeat
var box = document.getElementById("greenBox"),
    count = 0,
    tween;

tween = TweenMax.to(box, 2, {left:"740px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone});

function onRepeat() {
  count++;
  box.innerHTML = count;
  TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"});
}							

See the Pen TweenMax basic repeat and onRepeat by GreenSock (@GreenSock) on CodePen.

Staggered animations

TweenMax makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. TweenMax's three stagger methods: staggerTo(), staggerFrom() and staggerFromTo() are literal one-line wonders.

See the Pen TweenMax.staggerTo() by GreenSock (@GreenSock) on CodePen.

Additional Methods

TweenMax inherits a ton of methods from TweenLite and has quite a few of its own.

  • TweenLite and TweenMax Methods
  • delay()
  • delayedCall()
  • duration()
  • eventCallback
  • from()
  • fromTo()
  • getTweensOf()
  • invalidate()
  • isActive()
  • kill()
  • killDelayedCallsTo()
  • killTweensOf()
  • pause()
  • paused()
  • play()
  • progress()
  • restart()
  • resume()
  • reverse()
  • reversed()
  • seek()
  • set()
  • startTime()
  • time()
  • timeScale()
  • to()
  • totalDuration()
  • totalProgress()
  • totalTime()
  • Methods exclusive to TweenMax
  • getAllTweens()
  • isTweening()
  • killAll()
  • killChildTweensOf()
  • pauseAll()
  • repeat()
  • repeatDelay()
  • resumeAll()
  • staggerFrom()
  • staggerFromTo()
  • staggerTo()
  • updateTo()
  • yoyo()

Learn more in the TweenMax documentation.

Get GSAP

Version: 2.0.2 updated 2018-08-27

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Help support GreenSock by becoming a member

        Join Club GreenSock