Skip to content

Commit

Permalink
1.15.0
Browse files Browse the repository at this point in the history
- NEW transform-related animations (like rotation, scaleX, scaleY, x, y, z, etc.) will automatically get GPU-accelerated when possible by using 3D transforms which is just like applying the popular "translateZ(0)" hack. This will only be applied in browsers that recognize 3D transforms. This should be most noticable on mobile devices (improved performance).

- NEW CSSPlugin.defaultForce3D property that is "auto" by default, and can be changed to true or false to control the default force3D value for transform-related animations like x, y, z, rotation, scaleX, scaleY, etc.

- NEW DrawSVGPlugin added to membership packages (see http://greensock.com/club/) for animating the stroke on SVG elements.

- IMPROVED performance of transforms

- FIXED issue that caused TweenMax.updateTo() not to re-render immediately even if immediateRender was set to true.

- FIXED issue that caused a pause that was added to a TimelineLite/Max via addPause() to take effect when the playhead was placed directly on top of that spot and then on the next tick left, like tl.addPause(1).play(1);

- FIXED issue that could cause negative relative rotations not to take effect on DOM elements animated with CSSPlugin

- ELIMINATED an innerHTML set in CSSPlugin to better comply with security protocols

- FIXED issue that caused certain rotational transforms that were set outside of GSAP to not be interpreted correctly.

- ADDED ability for CSSPlugin to interpret matrix() values that are set on SVG elements via their "transform" attribute (rather than the CSS style). This can be useful because some graphics programs export their SVG using those values.

- IMPROVED the algorithm that senses if an element is SVG (for transforms) so that it works inside iframes and other sandboxed areas.

- FIXED issue that caused Draggable to throw an error if you defined a GreenSockGlobals object and used ThrowPropsPlugin

- FIXED package.json referred to "repositories" instead of "repository".
  • Loading branch information
gsap-dev committed Dec 3, 2014
1 parent 2c88aad commit 04774cb
Show file tree
Hide file tree
Showing 18 changed files with 352 additions and 321 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
# GSAP (GreenSock Animation Platform)

#### Professional-Grade HTML5 Animation
#### 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. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. Use animation to tell a story in a rich way rather than settling for a few fades and slides.

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 <a href="http://greensock.com/why-gsap/">"Why GSAP?"</a> 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 <a href="https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript">Google recommends it</a> 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.

This is the public repository for GreenSock's JavaScript tools like <a href="http://www.greensock.com/gsap-js/" target="_blank">GSAP</a> and <a href="http://www.greensock.com/draggable/" target="_blank">Draggable</a>. "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
Expand Down
12 changes: 8 additions & 4 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
{
"name": "gsap",
"version": "1.14.2",
"description": "GreenSock Animation Platform (GSAP) is a suite of high-performance JavaScript animation tools, including TweenLite, TweenMax, TimelineLite, TimelineMax, various easing equations (EasePack), plugins for things like animating along Bezier paths, tweening RaphaelJS or KineticJS objects, etc. and it also includes an optional jQuery plugin that hijacks the native jQuery.animate() method so that animations perform much better and additional properties can be tweened, like colors, transforms (2D and 3D), boxShadow, borderRadius, clip, and lots more. GSAP has no dependencies on jQuery and it can animate ANY numeric property of ANY object. See http://www.greensock.com/gsap-js/ for details.",
"version": "1.15.0",
"description": "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 http://greensock.com/why-gsap/ 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. 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 stands for the GreenSock Animation Platform. There's a jQuery plugin that hijacks the native jQuery.animate() method so that animations perform much better and additional properties can be tweened, like colors, transforms (2D and 3D), boxShadow, borderRadius, clip, and lots more. GSAP has no dependencies on jQuery or other libraries. See http://greensock.com/gsap/ for details.",
"author": {
"name": "Jack Doyle",
"url": "http://www.greensock.com/gsap-js/"
"url": "http://greensock.com/gsap/"
},
"main": "./src/uncompressed/TweenMax.js",
"dependencies": {

}
},
"repository": {
"type": "git",
"url": "https://github.com/greensock/GreenSock-JS"
}
}
21 changes: 10 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "gsap",
"filename": "TweenMax.min.js",
"version": "1.14.2",
"description": "GreenSock Animation Platform (GSAP) is a suite of tools for scripted animation, including TweenLite, TweenMax, TimelineLite, TimelineMax, various easing equations (EasePack), plugins for things like animating along Bezier paths, tweening RaphaelJS objects, etc. and it also includes a jQuery plugin that hijacks the native jQuery.animate() method so that animations perform much better and additional properties can be tweened, like colors, transforms (2D and 3D), boxShadow, borderRadius, clip, and lots more. GSAP has no dependencies on jQuery and it can animate ANY numeric property of ANY object.",
"version": "1.15.0",
"description": "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 http://greensock.com/why-gsap/ 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. 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 stands for the GreenSock Animation Platform. There's a jQuery plugin that hijacks the native jQuery.animate() method so that animations perform much better and additional properties can be tweened, like colors, transforms (2D and 3D), boxShadow, borderRadius, clip, and lots more. GSAP has no dependencies on jQuery or other libraries. See http://greensock.com/gsap/ for details.",
"homepage": "http://www.greensock.com/gsap-js/",
"main": "./src/uncompressed/TweenMax.js",
"keywords": [
Expand All @@ -18,6 +18,7 @@
"jQuery",
"jquery.gsap.js",
"Bezier",
"SVG",
"3D",
"2D",
"transform",
Expand All @@ -27,17 +28,15 @@
{
"name": "Jack Doyle",
"email": "[email protected]",
"web": "http://www.greensock.com"
"web": "http://greensock.com"
}
],
"bugs": {
"url": "http://greensock.com/forums/"
},
"repositories": [
{
"type": "git",
"url": "https://github.com/greensock/GreenSock-JS"
}
]
"url": "http://greensock.com/forums/"
},
"repository": {
"type": "git",
"url": "https://github.com/greensock/GreenSock-JS"
}

}
6 changes: 3 additions & 3 deletions src/minified/TimelineLite.min.js

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/minified/TimelineMax.min.js

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/minified/TweenLite.min.js

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions src/minified/TweenMax.min.js

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/minified/plugins/BezierPlugin.min.js

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/minified/plugins/CSSPlugin.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/minified/plugins/ScrollToPlugin.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions src/minified/utils/Draggable.min.js

Large diffs are not rendered by default.

21 changes: 12 additions & 9 deletions src/uncompressed/TimelineLite.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* VERSION: 1.14.2
* DATE: 2014-10-18
* VERSION: 1.15.0
* DATE: 2014-12-03
* UPDATES AND DOCS AT: http://www.greensock.com
*
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
Expand Down Expand Up @@ -51,14 +51,15 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
return copy;
},
_pauseCallback = function(tween, callback, params, scope) {
var time = tween._timeline._totalTime;
if (callback || !this._forcingPlayhead) { //if the user calls a method that moves the playhead (like progress() or time()), it should honor that and skip any pauses (although if there's a callback positioned at that pause, it must jump there and make the call to ensure the time is EXACTLY what it is supposed to be, and then proceed to where the playhead is being forced). Otherwise, imagine placing a pause in the middle of a timeline and then doing timeline.progress(0.9) - it would get stuck where the pause is.
tween._timeline.pause(tween._startTime);
var tl = tween._timeline,
time = tl._totalTime;
if ((callback || !this._forcingPlayhead) && tl._rawPrevTime !== tween._startTime) { //if the user calls a method that moves the playhead (like progress() or time()), it should honor that and skip any pauses (although if there's a callback positioned at that pause, it must jump there and make the call to ensure the time is EXACTLY what it is supposed to be, and then proceed to where the playhead is being forced). Otherwise, imagine placing a pause in the middle of a timeline and then doing timeline.progress(0.9) - it would get stuck where the pause is.
tl.pause(tween._startTime);
if (callback) {
callback.apply(scope || tween._timeline, params || _blankArray);
callback.apply(scope || tl, params || _blankArray);
}
if (this._forcingPlayhead) {
tween._timeline.seek(time);
tl.seek(time);
}
}
},
Expand All @@ -71,7 +72,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
},
p = TimelineLite.prototype = new SimpleTimeline();

TimelineLite.version = "1.14.2";
TimelineLite.version = "1.15.0";
p.constructor = TimelineLite;
p.kill()._gc = p._forcingPlayhead = false;

Expand Down Expand Up @@ -286,7 +287,9 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
};

p.addPause = function(position, callback, params, scope) {
return this.call(_pauseCallback, ["{self}", callback, params, scope], this, position);
var t = TweenLite.delayedCall(0, _pauseCallback, ["{self}", callback, params, scope], this);
t.data = "isPause"; // we use this flag in TweenLite's render() method to identify it as a special case that shouldn't be triggered when the virtual playhead is LEAVING the exact position where the pause is, otherwise timeline.addPause(1).play(1) would end up paused on the very next tick.
return this.add(t, position);
};

p.removeLabel = function(label) {
Expand Down
24 changes: 14 additions & 10 deletions src/uncompressed/TimelineMax.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* VERSION: 1.14.2
* DATE: 2014-10-18
* VERSION: 1.15.0
* DATE: 2014-12-03
* UPDATES AND DOCS AT: http://www.greensock.com
*
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
Expand Down Expand Up @@ -34,7 +34,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa

p.constructor = TimelineMax;
p.kill()._gc = false;
TimelineMax.version = "1.14.2";
TimelineMax.version = "1.15.0";

p.invalidate = function() {
this._yoyo = (this.vars.yoyo === true);
Expand Down Expand Up @@ -498,14 +498,15 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
return copy;
},
_pauseCallback = function(tween, callback, params, scope) {
var time = tween._timeline._totalTime;
if (callback || !this._forcingPlayhead) { //if the user calls a method that moves the playhead (like progress() or time()), it should honor that and skip any pauses (although if there's a callback positioned at that pause, it must jump there and make the call to ensure the time is EXACTLY what it is supposed to be, and then proceed to where the playhead is being forced). Otherwise, imagine placing a pause in the middle of a timeline and then doing timeline.progress(0.9) - it would get stuck where the pause is.
tween._timeline.pause(tween._startTime);
var tl = tween._timeline,
time = tl._totalTime;
if ((callback || !this._forcingPlayhead) && tl._rawPrevTime !== tween._startTime) { //if the user calls a method that moves the playhead (like progress() or time()), it should honor that and skip any pauses (although if there's a callback positioned at that pause, it must jump there and make the call to ensure the time is EXACTLY what it is supposed to be, and then proceed to where the playhead is being forced). Otherwise, imagine placing a pause in the middle of a timeline and then doing timeline.progress(0.9) - it would get stuck where the pause is.
tl.pause(tween._startTime);
if (callback) {
callback.apply(scope || tween._timeline, params || _blankArray);
callback.apply(scope || tl, params || _blankArray);
}
if (this._forcingPlayhead) {
tween._timeline.seek(time);
tl.seek(time);
}
}
},
Expand All @@ -518,7 +519,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
},
p = TimelineLite.prototype = new SimpleTimeline();

TimelineLite.version = "1.14.2";
TimelineLite.version = "1.15.0";
p.constructor = TimelineLite;
p.kill()._gc = p._forcingPlayhead = false;

Expand Down Expand Up @@ -564,6 +565,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
if (typeof(targets) === "string") {
targets = TweenLite.selector(targets) || targets;
}
targets = targets || [];
if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array.
targets = _slice(targets);
}
Expand Down Expand Up @@ -732,7 +734,9 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
};

p.addPause = function(position, callback, params, scope) {
return this.call(_pauseCallback, ["{self}", callback, params, scope], this, position);
var t = TweenLite.delayedCall(0, _pauseCallback, ["{self}", callback, params, scope], this);
t.data = "isPause"; // we use this flag in TweenLite's render() method to identify it as a special case that shouldn't be triggered when the virtual playhead is LEAVING the exact position where the pause is, otherwise timeline.addPause(1).play(1) would end up paused on the very next tick.
return this.add(t, position);
};

p.removeLabel = function(label) {
Expand Down
Loading

0 comments on commit 04774cb

Please sign in to comment.