Get GSAP

Version: 1.13.1 updated 2014-07-22

Core

    Extras

      Plugins

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

        TweenMax

        TweenMax extends TweenLite, adding many useful (but non-essential) features like  repeat(), repeatDelay(), yoyo(), updateTo(), and more. TweenMax was built for convenience, providing a single JavaScript file that contains everything you will commonly need for animating DOM elements:

        • TweenLite
        • TweenMax
        • TimelineLite
        • TimelineMax
        • CSSPlugin
        • RoundPropsPlugin
        • DirectionalRotationPlugin
        • BezierPlugin
        • EasePack

        All that for less than 30kb (gzipped). Load one file (TweenMax.min.js) and you're good to go!

        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, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.

        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.