Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Public repository for GreenSock's JavaScript libraries like GSAP. See


- NEW: smoothOrigin feature added to CSSPlugin and is enabled by default. When changing the transformOrigin (or svgOrigin) of an SVG element, CSSPlugin will now automatically record/apply some offsets to ensure that the element doesn't "jump". You can disable this by setting CSSPlugin.defaultSmoothOrigin = false, or you can control it on a per-tween basis using smoothOrigin:true | false. Explanation: The way transforms and transform-origins work in the browser (and according to the official spec), changing the origin causes the element jump in a jarring way. For example, if you rotate 180 degrees when the transform-origin is in the element's top left corner, it ends up at a very different position than if you applied the same rotation around its bottom right corner. Since GSAP is focused on solving real-world problems for animators (most of whom prefer to smoothly alter the transformOrigin), the new smoothOrigin feature in GSAP solves this issue. This also means that if you create SVG artwork in an authoring program like Adobe Illustrator or Flash where it may not be easy/obvious to control where the element's origin is, things will "just work" when you define a transformOrigin via GSAP. Currently, this feature only applies to SVG elements, as that is where it is more commonly a pain-point, and we're eager to see how GSAP users employ the feature and share their feedback/suggestions before we consider adding it to "regular" DOM elements.

- NEW: CSSPlugin now accommodates percentage-based x/y translation on SVG elements. Caveat: it's calculated and then baked into the matrix(), so it's not "live" meaning if you later change the width/height of the SVG element, it doesn't alter the translation but you could certainly just re-apply the translation if you need to.

- NEW: CSSPlugin now parses transform="translate(...)" attribute in SVG elements (previously it only parsed matrix()).

- NEW: AttrPlugin will retain suffixes like "%", meaning you can tween values like <rect width="50%"...>. Caveat: it doesn't do unit conversion (like px to %), but that's rarely needed anyway.

- NEW: You can define the scope for all of the callbacks (onStart, onUpdate, onComplete, onReverseComplete, etc.) using the new "callbackScope" special property. This helps consolidate code and we can't remember ever seeing a case where someone wants to define a different scope for different callbacks. The older callback-specific scope properties are deprecated (but still work): onStartScope, onUpdateScope, onCompleteScope, onReverseCompleteScope, and onRepeatScope)

- NEW: Draggable now dispatches "throwupdate" and "throwcomplete" events (like when you add listeners like myDraggable.addEventListener("throwcomplete", function() {...}))

- NEW: Draggable has a new "isThrowing" property

- NEW: Draggable recognizes a new "callbackScope" special vars property that allows you to define the scope of all callbacks like onDragStart, onDrag, onPress, onDragEnd, onThrowUpdate, onThrowComplete, etc. This also means that the following will be deprecated (although they still work fine): onPressScope, onDragStartScope, onDragScope, onDragEndScope, onThrowUpdateScope, onThrowCompleteScope, onReleaseScope, and onClickScope.

- NEW: Draggable.hitTest() can be used with "window" to figure out if/when an element is in the viewport.

- IMPROVED: accuracy of the rotational transform-origin plotting on SVG elements. In fact, SVG support all-around is improved.

- FIXED: while dragging an element in iOS, if you pressed another finger on the same element and then released, it didn't continue dragging.

- FIXED: In Draggable, if you set overshootTolerance to 0, you may still see a slight overshoot unless you set minDuration to 0. That is now automatically adjusted.

- FIXED: svgOrigin now factors in existing transforms (previously, it plotted the global svgOrigin based on the element's untransformed state).

- FIXED: works around bugs in the way Firefox renders SVGs that have CSS transforms applied by forcing them into the "transform" attribute instead of using CSS styles.

- FIXED: bounds weren't applied properly on SVG elements in IE and some versions of Android.

- FIXED: a Draggable's "x" or "y" value was updated even if that axis wasn't active/allowed (not the Draggable's target - just the recorded value on the Draggable instance itself)

- FIXED: some module systems like Browserify threw an error saying that CSSPlugin wasn't defined inside Draggable.

- FIXED: now if two tweens of the same object and property start at exactly the same time, the overwriting tween's starting values aren't affected by the overwritten tween's first render.

- FIXED: rare bug that could cause transform-origin of SVG elements to render incorrectly.

- FIXED: bug that could cause the final/end value of a roundProps tween of a CSS property not to be rounded.

- FIXED: ThrowPropsPlugin didn't properly handle some situations when minDuration was set to a value higher than 1.

- FIXED: ThrowPropsPlugin now handles roundProps on non-css properties correctly.

- FIXED: DrawSVGPlugin works around a browser rendering bug related to when a <rect> (or other shape) has a stroke along the full length but it looks like the very corner isn't connected perfectly (it now removes the stroke-dasharray in that case completely).

- FIXED: worked around a bug in IE10 and IE11 that (in rare situations) could cause SVG strokes not to animate properly using DrawSVGPlugin. (Browser bug documented here:
latest commit bdb59c5ff7
GreenSock authored
Failed to load latest commit information.
src 1.17.0
.gitignore Initial full commit 1.17.0
bower.json 1.17.0
package.json 1.17.0

GSAP (GreenSock Animation Platform)

Ultra high-performance, professional-grade animation for the modern web

GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, API efficiency, and tight control while solving real-world problems that animators face. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. GSAP can animate any numeric property of any JS object, not just CSS properties.

Getting started video

Getting started video

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 countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. See the "Why GSAP?" article for details. Most other libraries only animate 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 that dictate how you structure your apps, GSAP simply affects the animation layer; sprinkle it wherever you want.

This is the public repository for GreenSock's JavaScript tools like GSAP and Draggable. "GSAP" describes all of the animation-related tools which include TweenLite, TweenMax, TimelineLite, TimelineMax, various plugins (like CSSPlugin for animating CSS properties of DOM elements), extra easing functions, etc.


Need help?

Head over to the GreenSock forums which are an excellent resource for learning and getting your questions answered. Report any bugs there too please (it's also fine to file an issue on Github if you prefer)

Copyright (c) 2008-2015, GreenSock. All rights reserved.

License: GreenSock's standard "no charge" license can be viewed at Club GreenSock members are granted additional rights, as described in the license that comes with their membership. For more information about licensing, see

Something went wrong with that request. Please try again.