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: TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.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()
