Get GSAP

Version: 1.14.2 updated 2014-10-29

Core

    Extras

      Plugins

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

        HTML5
        Why GSAP?
        Performance
        Compatibility
        Other tools fall down in older browsers, but GSAP is remarkably compatible.
        Scale, rotate & move independently
        (impossible with CSS animations/transitions)
        XNJYHQLJYQEW
        CSS, canvas libraries, colors, beziers, etc.
        Total control
        pause(), play(), reverse(), or timeScale() any tween or sequence.
        GSAP
        The new standard for HTML5 animation
        The new standard for HTML5 animation

        Crazy fast

        Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any tweening engine worth its weight and GSAP outperforms old “industry standards” by literally 1000%+ under stress. What was jerky and twitchy is now fluid. It’s the result of countless optimizations made to ensure that your interactive projects are responsive, efficient, and buttery smooth. Check out the speed test for a head-to-head comparison.

        Freakishly robust

        Built for professionals, GSAP is packed with features that make most other engines look like cheap toys. Animate colors, beziers, css properties, arrays, scrolls and lots more. Round values, smoothly reverse() on the fly, use relative values, automatically accommodate getter/setter functions, employ virtually any easing equation, and manage conflicting tweens like a pro. Define callbacks, tween in seconds or frames, build sequences effortlessly (even with overlapping tweens), repeat/yoyo and more.

        Compatible

        HTML5, jQuery, Canvas, CSS, new browsers, old browsers, RequireJS, EaselJS, mobile, and more – GSAP gets along with them famously. Use your favorite tools without jumping through endless hoops to ensure compatibility. It even accommodates various transforms (scale, skew, rotation, x, and y) in modern browsers plus IE back to version 6 without requiring clunky browser prefixes and hacks. We worry about compatibility so that you don’t need to. Another headache solved.

        Animate anything

        That’s right. Anything. No predefined list of properties to choose from. Any numeric property of any object can be tweened, and if the property needs special handling (like colors, filters, non-numeric values, etc.), chances are there’s a plugin that will do it. If not, one can be created. The possibilities are endless.

        Lightweight & expandable

        Modular, flexible, and ultra-efficient, its plugin architecture keeps the core engine tight while allowing virtually any feature to be added via optional plugins. TweenLite packs an amazing amount of power into a surprisingly small package (around 7kb).

        No dependencies

        The GreenSock Animation Platform isn’t built on top of any 3rd party tools like jQuery (although it works great with jQuery as a selector). This approach minimizes load times and maximizes performance.

        Advanced sequencing

        You’re not limited to “one-after-the-other” sequencing; have animations overlap as much as you want. Nest timelines inside other timelines. Insert gaps, callbacks, labels, staggered tweens, and more. You get precise control over timing and unprecedented flexibility to create expressive animations with minimal code.

        Dedicated support

        Everybody needs a little help sometimes. We’ve got your back. When deadlines are looming and you can’t figure something out, hop over to http://forums.greensock.com to get your GreenSock-related questions answered in the forums. With a proven track record of active participation by the author and an army of fellow users, GreenSock tools are unlike most open source projects that stagnate or offer zero support.

        Permissive license

        Completely free for everything except a very specific type of commercial use (reselling to multiple customers), GreenSock’s license makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform.

        View All Features

        What is GSAP?

        Think of GSAP as the Swiss Army Knife of animation...but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves lots of browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See the "Why GSAP?" article for details. Other libraries like jQuery, Velocity, Transit, and Zepto only tween CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison. Simply put, GSAP is the most flexible high-performance animation library on the planet, which is probably why Google recommends it for JS-based animations. And unlike monolithic frameworks like Famo.us or Angular that dictate how you structure your apps, GSAP simply owns the animation layer; sprinkle it wherever you want.

        GSAP consists of the following core tools, plus quite a few plugins, eases, and special utilities like Draggable and SplitText:

        TweenLite

        TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).

        TweenMax

        TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), updateTo(), and more. It also includes many extra tools and plugins by default, making it extremely full-featured (TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, DirectionalRotationPlugin, BezierPlugin, and EasePack).

        TimelineLite

        TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time.

        TimelineMax

        TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() and more.TimelineMax is GSAP's most powerful and feature-packed sequencing tool.

        View GSAP plugins Docs

        Featured Examples and Showcases

        Edge Rotater

        An excellent example of Draggable and ThrowPropsPlugin. Flick and spin in 3D! Another wonderful creation from Chris Gannon.

        views
        13915
        comments
        0

        Howl’s Moving Castle

        A magical wonder of animation grandeur by Nathan Gordon.

        The Capitol

        The Capitol believes the citizens deserve websites with immaculate design, superb photography and animation by GSAP.

        View All Examples and Showcases