Tags: jhoard/GreenSock-JS
Tags
1.17.0
- NEW: smoothOrigin feature added to CSSPlugin and is enabled by default. When changing the transformO
10000
rigin (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: http://codepen.io/GreenSock/pen/714f215a4a26fcacc1661f61f00d7bcb/?editors=001)
1.16.1 - NEW: Draggable allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis. For example, a Draggable of type:"x" or "left" would permit native touch-scrolling in the vertical direction, and type:"y" or "top" would permit native horizontal touch-scrolling. - NEW: Draggable now has an onLockAxis callback. - NEW: Draggable recognizes a new "allowEventDefault" config property. If it's set to true, Draggable won't call preventDefault() on the mouse/touch events so that you can get the native/default behavior if that's what you prefer, or you can manually call it using yourDraggable.pointerEvent.preventDefault(). - IMPROVED: slight performance boost for transforms - FIXED: clearProps:"transform" (or any transform property) also clears any data-svg-origin attribute. - FIXED: issue that could cause transforms that are applied along with className in the same tween to not be applied properly. - FIXED: issue that could cause a ThrowPropsPlugin tween of a DOM element to overwrite other ThrowPropsPlugin tweens of the same element even if they were for different properties (like "x" and "rotation"). - FIXED: issue that could kill active "x" tweens of a Draggable instance when its enable() method is called. - FIXED: if you called resume() from inside an addPause() callback on a reversed timeline, it didn't resume properly (the callback would keep getting called). - FIXED: if you resume()/play() a tween that had already completed, it would keep the ticker alive indefinitely. - FIXED: in rare cases, a callback that was positioned directly on top of an addPause() in a TimelineLite/Max wouldn't be called when the timeline was played in reverse. - FIXED: regression in 1.16.0 that caused the ticker to rever to using setTimeout() instead of requestAnimationFrame if there were no animations running at roughly 1.5 seconds after the script instantiated. - FIXED: if you called disable() on a Draggable, it didn't reset the touch-action properly, so it could still interfere with touch device interaction. - FIXED: when skewType was set to "simple", skewY was still compensated. - FIXED: issue with jquery.gsap.js plugin that prevented slideUp() and slideDown() from working properly.
1.16.0
- NEW: Draggable has a new "autoScroll" special property that you can set to a number to enable auto-scrolling when the user drags near the edge of a scrollable container. For example, Draggable.create(element, {autoScroll:1}); will auto-scroll at the default speed, whereas autoScroll:2 would scroll twice as fast≤ etc.
- NEW: Draggable has a new getDirection() method that returns "right", "left", "up", "down", "right-up", "right-down", "left-up", or "left-down". It can compare the current position to either where it was when the drag started (the default), or the moment-by-moment velocity direction, or compare it to another element. Example: myDraggable.getDirection(myElement) or myDraggable.getDirection("velocity");
- NEW: Draggable exposes the lockedAxis property so that you can find out whether it's "x" or "y".
- NEW: Draggable recognizes a new "clickableTest" special property which is a function that gets called when the user presses on an element inside a Draggable. That way, you can return true if the element should be considered "clickable" (like a <button> or <a> or <select>) or false if not.
- NEW: CSSPlugin recognizes a new "svgOrigin" special property that allows you to set the transform origin based on absolute SVG coordinate system which can be more convenient than transformOrigin (which is relative to the element's own top left corner). svgOrigin always trumps transformOrigin if both are set. So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. It also records the value in the data-svg-origin attribute so that it can be parsed back that way as well. svgOrigin doesn't accommodate percentage-based values.
- NEW: jquery.gsap.js plugin now allows you to define legacy properties that should pass through GSAP's processing, like $.gsap.legacyProps("translateX,translateY,scaleX,scaleY"); This helps avoid compatibility problems with other jQuery plugins that also customize animation behavior.
- NEW: ColorPropsPlugin recognizes a new "numFormat" Boolean value that you can set like colorProps:{myProperty:"red", numFormat:true} if you want the value to be **set** using a numeric value instead of a string rgb() or rgba() value. For example, it's perfect if you're using a canvas framework that expects a number like 0xFF0000 instead of "rgb(255,0,0)".
- NEW: You can set TweenLite.autoSleep to the number of frames between garbage collection routines (which is also when the ticker goes to sleep if there are no active tweens left). The default is 120.
- IMPROVED: Draggable's support for SVG has never been better. It plots the rotational origin accurately, for example.
- IMPROVED: several performance optimizations were made to Draggable, particularly for transforms and scrolling.
- IMPROVED: force3D:"auto" will no longer try to toggle back to 2D inbetween repeats in a TweenMax instance. This just helps performance.
- IMPROVED: Elastic eases handle "amplitude" config parameters of less than 1 in a more intuitive way, adjusting period to achieve the effect that the user most likely wanted.
- FIXED: className tweens in Chrome no longer leave several -webkit- prefixed properties contaminating the inline styles after the tween finishes (the problem was caused by an inconsistency in the browser itself)
- FIXED: tweens of boxShadow now prioritize "inset" in the end value instead of the beginning value. Previously, if the beginning value contained "inset", it would force it into the end value.
- FIXED: potential rounding error when setting the "snap" of a Draggable to an array of values.
- FIXED: in some rare cases, a Draggable of type:"scrollTop" | "scrollLeft" | "scroll" would have a small margin at the top (like 15px).
- FIXED: animation of transforms of SVG elements in Safari now default to using the "transform" attribute instead of CSS transforms because of bugs in Safari that'd cause them not to be rendered correctly in certain scenarios.
- FIXED: some problems with parsing SVG element transforms (either CSS-based or transform attribute-based).
- FIXED: skewType:"simple" works on elements that only have 2D transforms
- FIXED: zero-duration tweens or callbacks that are positioned at the very beginning of a TimelineLite or TimelineMax will render their starting values after the timeline has been reversed and the playhead goes past the beginning.
- FIXED: callbacks that are positioned exactly at the same spot as an addPause() on a TimelineLite/Max will fire properly now (previously, it could fire before and after the pause/resume and not at all in reverse)
- FIXED: if a timeline is reversed, finishes reversing, and then reverse() is called again, it could end up preventing the timeline from being removed from a parent timeline that has autoRemoveChildren enabled which means it could prevent it from being eligible for GC and consequently not let the main ticker go to sleep in that particular case.
- FIXED: regression in 1.15.x caused addPause() not to always pause when necessary (it could skip on very rare occasions).
- FIXED: if an addPause() was added to the very beginning of a timeline and then reverse() was called, finished, and then later play() was called, the pause would be in effect until you resumed/played again. That's fixed now.
1.15.1 - IMPROVED virtually all of the 3D matrix math in CSSPlugin. Not only should it be slightly faster for rotations, it no longer limits the decimals to 6 digits, meaning if you rotate by tiny amounts over long periods of time, you won't see jumping. - ADDED removePause() method to TimelineMax for removing a pause at a particular spot using addPause(). - FIXED a regression in 1.15.0 that could cause it to incorrectly parse an element's rotational values that were set via a CSS transform: rotate3d(...). See greensock#73 (comment) - FIXED TimelineMax.tweenTo() and tweenFromTo() no longer use overwrite:true by default which could cause unintuitive behavior when used to place multiple tweens into a master timeline that were operating on another timeline. - FIXED broken parsing of numbers that have extra zeros on the end after the decimal, like width:50.50% in CSSPlugin - FIXED: Now transformOrigin: "center" is allowed (it really should be "center center" according to the css spec, but now it defaults to that). Bug report: greensock#81 - FIXED ScrambleTextPlugin now works with SVG text in IE. - FIXED CSSRulePlugin doesn't throw an error now if you load style sheets from another domain (it just ignores them when the browser disallows them due to cross-domain security issues). - FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly. - FIXED parsing of relative rotational values with both postive and negative signs, like "+=-20" which may seem odd to begin with, but it's what happens if you use a variable and compose things dynamically like {rotation: "+=" + myValue} when myValue is negative. - FIXED worked around a bug in Firefox that caused it to fail the test for CSS transforms applied to SVG, thus previously it would use the "transform" attribute instead of the CSS style. Now the CSS style will be used which permits 3D. - FIXED natively clickable elements like <a> and <button> elements didn't trigger their default click event action on some native browsers like iOS 8 when a user clicked on a Draggable without moving it. - ADDED minimumMovement special property to Draggable (set in the config object) that defines the minimum distance that the mouse/touch must move before being interpreted as a drag. Default is 2. - FIXED issue that caused a Draggable.update() call to fail if the type was "x" or "y". - UPDATED copyright dates and a few URLs.
1.15.0 - 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".
1.14.2 - New: onOverwrite callbacks are now called just BEFORE overwriting occurs (instead of after) so that you can optionally return false to cancel that particular overwrite. - New: added CSSPlugin.useSVGTransformAttr property that allows you to force SVG transforms into the "transform" attribute instead of CSS style, although you'll probably never need to set this manually because the plugin automatically senses when that's necessary. This propery is intended to be a failsafe measure that you could tap into if things aren't behaving as you intended. - New: instead of removing transform-origin from the inline style of SVG elements, CSSPlugin now sets it to 0px 0px to normalize behavior across browsers and prevent style sheets/rules from interfering. - New: added Opera support for SVG transforms in CSSPlugin - Fixed: tiny string-based numbers that are passed in scientific notation (like 1e-8) are correctly recognized now. - Fixed: the special transform-origin fixes for SVG elements are no longer applied to the wrapper <svg> itself if you choose to animate that. - Fixed: now when you TweenMax.updateTo() a tween that was set to immediately render and you do so before it starts, it will render the change immediately.
1.14.0 - NEW: apply CSS tranfsorms to SVG elements with consistency, including transformOrigin! The major browsers vary widely in how they support transforms; IE ignores them, requiring that they be applied to the "transform" attribute, Firefox measures transformOrigin differently for px and %, and neither is the same as webkit. GSAP makes them behave in a consistent manner. - NEW: all tweens/timelines have an endTime() method that returns the time (according to their parent timeline's local time) at which the tween is scheduled to end. - NEW: TimelineLite/Max have a new recent() method that returns that most recently-added tween (or delayedCall). This can be handy if, for example, you want to define a position according to the previously added tween, like tl.to(..., tl.recent().startTime() + 2) to insert the tween 2 seconds after the previously added one starts. - NEW: static TweenLite.onOverwrite callback that gets called when any tween gets overwritten. - NEW: onOverwrite special property that you can define on a per-tween basis. This callback gets called if/when that tween gets overwritten by another tween. - NEW: if you define a negative stagger value in a staggerTo()/staggerFrom()/staggerFromTo(), it will simply reverse the order in which things are animated. The onCompleteAll is called at the proper time in that case too. - Fixed: an error could be thrown if a super-short lazy-rendering tween was instantiated from inside an onUpdate of another tween. - Fixed: a from() tween positioned at the very beginning of a timeline wouldn't be rendered at the pre-tween value when the playhead of the timeline's parent timeline was rewound to a place before that nested timeline's startTime(). - Fixed: error was thrown if you tried creating a Draggable on an element that wasn't in the document/body yet. - Fixed: Draggable didn't handle position:fixed elements correctly in Firefox in some cases - Fixed: Draggable didn't permit zIndexBoost for type:"rotation" Draggables - Fixed: skewY wasn't recorded in _gsTransform - Fixed: a relative transform that had a suffix (like x:"+=20px") didn't to work properly - Fixed: if you tried animating a 3D-related transform property, IE9 and earlier didn't render even the 2D portions (this was a recent regression). It now simply ignores the 3D portions when appropriate. - Fixed: in very rare cases IE8 wouldn't render an opacity tween properly. - Improved: previously, clearProps required a comma-delimited list of properties with no spaces, but now spaces are allowed.
1.13.2 packaging - Draggable can now accommodate multiple triggers - Fixed an issue that caused a Draggable to immediately snap inside of its bounds (when defined) the moment you clicked on it outside the bounds during a throwProps tween (imagine throwing an element outside the bounds, and before it returns, you click on it again - previously it would jump into the bounds but now it stays correctly where you click) - Fixed warning that may appear in certain browsers like webkit about document.all not existing (it's Microsoft-specific) - Bounds are applied immediately when a Draggable is created (instead of waiting until the user clicks/touches) - Added suppressEvents parameter to progress() and totalProgress() - Fixed regression that prevented CSSPlugin.defaultTransformPerspective from working properly. - Fixed issue that could cause a seek() of a TimelineLite/Max to stop at an addPause(). - Fixed issue that could cause an invalidate() not to work as expected on a timeline (immediateRender tweens now render immediately after the invalidate()) - invalidate() now returns the virtual playhead to a time of 0. - Fixed an issue that caused lazy rendering to ignore the suppressEvents parameter, meaning if you seek() a timeline past the point where there is an un-initted tween that has callbacks, those callbacks would get called even though suppressEvents is true for seek() by default.
Update to GSAP 1.13.1 - Reordered the order in which the default selector was determined to more closely match versions prior to 1.13.0. If, for example, "$" referred to jQuery at the time TweenLite/Max loaded and then some other selector engine (like Zepto or Prototype) was loaded that hijacked "$", version 1.13.0 used the latter whereas earlier versions used the former. The goal here is to maximize compatibility with legacy code. - Fixed minor compatibility problem with jquery.gsap.js plugin
PreviousNext