Public repository for GreenSock's JavaScript libraries like GSAP. See http://www.greensock.com
JavaScript
Latest commit 40028af Jan 22, 2017 GreenSock 1.19.1
Replacing 1.19.1 tag primarily to fix a bower.json issue, but pasting all the 1.19.1 changes below for convenience:
——

- NEW: Draggable offers new snapping capabilities; simply provide a "points" array (objects with "x" and "y" properties) to which it should snap. You can even define a "radius" so that it'll only snap when it's within a certain distance (px). Example:

	Draggable.create("#id", {
	  type:"x,y",
	  liveSnap:{
		points:[{x:0,y:0}, {x:100, y:200}, {x:400, y:100}],  //array of x/y values to snap to
		radius:50  //only snap within 50px
	  }
	});

	Or instead of an array of points, you can provide a function which will be passed one argument - an object with "x" and "y" properties representing the current values. You then return a similarly-formatted object with whatever x/y values you want. This way, you have total control over how snapping occurs. Previously, you could define separate functions for "x" and "y", but it was very challenging to run logic that requires both x and y at the same time; this new feature makes it extremely easy.

- NEW: Draggable has new "deltaX" and "deltaY" properties indicating the change in position since the last render/drag.

- NEW: Draggable has new "startX" and "startY" properties indicating the starting position (when the most recent drag began).

- IMPROVED: The NPM package now has all of the uncompressed files in the root to make importing easier, especially for the tools that aren't included inside TweenMax like Draggable. For example, you could do this in a commonjs-based (node) environment:

	 import Draggable from "gsap/Draggable";
	 import {TweenLite, Power2, TimelineMax, TweenMax} from "gsap";

- IMPROVED: DrawSVGPlugin accommodates vector-effect="non-scaling-stroke" on shapes.

- IMPROVED: EaselPlugin now accommodates animating a MovieClip to a particular frame label (rather than only frame numbers). Like TweenLite.to(mc, 1, {easel:{frame:"yourLabel"}});

- IMPROVED: worked around Firefox bugs that caused SVG <mask> elements inside <defs> not to transform properly (like if you animate the x, y, scaleX, scaleY, rotation, etc.).

- IMPROVED: DrawSVGPlugin works better with elements whose width/height are defined in non-px values, like %.

- IMPROVED: worked around errors that could be thrown when using GSAP in a server-only environment where there is no "document" or "window".

- FIXED: The 2 "cycle" parameters that were fed to function-based values were flip-flopped (only) in the TimelineMax stagger methods (target then index instead of vice-versa).

- FIXED: ScrollToPlugin is now exposed on the global scope.

- FIXED: In a very rare situation, Draggable could miscalculate the global origin around which the element spins. (CSSPlugin had a performance optimization that leveraged a "_gsCache" object for recording widths, and Draggable leveraged a similarly named object).

- FIXED: Worked around a Firefox bug that misreports the position of the origin of SVG elements that have a width and height of zero.

- FIXED: liveSnap was previously implemented on mousedown/touchstart on a Draggable rather than only when dragging starts.

- FIXED: Draggable with type:"scrollLeft" would prevent vertical touch-scrolling in iOS browsers.

- FIXED: If the initial state of an SVG had its scale at exactly 0 and it also had a data-svg-origin attribute, it wouldn't scale up properly.

- FIXED: function-based values for "scale" on DOM elements didn't correctly apply to both scaleX and scaleY.

- IMPROVED: Transforms are always applied to the "transform" attribute of SVG elements across all browsers now for consistency (previously the default was to use CSS transforms only in Chrome because it technically offered more options, like 3D, but the current SVG spec itself doesn't support that).

- FIXED: Worked around a Firefox issue that caused svgOrigin not to work as expected if transform-origin is previously set in CSS.

- FIXED: If there was an invalid (or basically invisible) arc command in an SVG path string, it could throw an error in MorphSVGPlugin but now it silently skips it.

- FIXED: If a child is removed from a TimelineLite/Max whose last child (in terms of startTime) is set to start BEFORE the current time on that timeline, it would jump its time to the end.

- NEW: ScrambleTextPlugin has a new rightToLeft option that you can set to true in order to make the text unscramble from right-to-left.

- FIXED: If the beginning and ending value **types** were different (like obj.value was a string but you try tweening to a Boolean or number, for example), it wouldn't work properly.

- FIXED: If MorphSVGPlugin.convertToPath() was called on an element whose selector name had 3 or more numbers, and selector text was used to identify it in the "shape" for the tween, it could fail.

- FIXED: iOS Safari 10+ was mis-identified as being version 6 or less (thus some bux fixes were applied when not necessary).

- FIXED: new touch-related behavior in Chrome caused Draggable not to work occasionally when type:"x" or type:"left" was used (alone) and the user started dragging vertically instead of horizontally (interpreted as an attempt to touch-scroll).

- FIXED: if you define an onStart in a TimelineMax.tweenFromTo(), there was a recursion error.

- FIXED: if the playhead landed between 0 and 0.0000001 on a zero-duration tween playing in reverse, it could render at its end state instead of beginning state.

- FIXED: creating a CustomEase where the final segment is a straight vertical line now renders at the end value properly.
Permalink
Failed to load latest commit information.
src 1.19.1 Jan 18, 2017
.gitignore Initial full commit Sep 22, 2012
README.md 1.19.1 Jan 18, 2017
bower.json Fixes bower.json main path regression from 1.19.1 Jan 18, 2017
package.json 1.19.1 Jan 23, 2017

README.md

GSAP (GreenSock Animation Platform)

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

GSAP is a JavaScript library for high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems for animators on over 2.5 million sites. 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. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and 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 robust high-performance animation library on the planet, which is probably why Google recommends it for JS-based animations and every major ad network excludes it from file size calculations. Unlike monolithic frameworks that dictate how you structure your apps, GSAP completely flexible; 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.

Resources

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

Click the green "Download GSAP" button at http://greensock.com for more options. Most ad networks have it on their CDNs as well, so contact them for the appropriate URL(s).

NPM

npm install gsap

The default (main) file is TweenMax which also includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and all of the eases like Power1, Power2, Power3, Power4, Back, Bounce, Circ, Cubic, Elastic, Expo, Linear, Sine, RoughEase, SlowMo, and SteppedEase (except the CustomEase, CustomWiggle, and CustomBounce). Please make sure you're using at least version 1.19.1.

//typical import
import {TweenMax, Power2, TimelineLite} from "gsap";

//or get to the parts that aren't included inside TweenMax (works as of 1.19.1):
import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

Get CustomEase for free

Sign up for a free GreenSock account to gain access to CustomEase, a tool that lets you create literally any ease imaginable (unlimited control points). It's in the download zip at GreenSock.com (when you're logged in).

Need help?

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

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

License: GreenSock's standard "no charge" license can be viewed at http://greensock.com/standard-license. Club GreenSock members are granted additional rights. See http://greensock.com/licensing/ for details. Why doesn't GreenSock use an MIT (or similar) open source license, and why is that a good thing? This article explains it all: http://greensock.com/why-license/