Skip to content

Commit

Permalink
3.8.0
Browse files Browse the repository at this point in the history
- NEW: ScrollTrigger recognizes a new "containerAnimation" configuration property for when the trigger element is being "scrolled" into view by a linear Tween of its container, like when vertical scrolling causes elements to move **horizontally** into view. You could think of it like a nested ScrollTrigger.

- NEW: ScrollTrigger recognizes a new "preventOverlaps" configuration property that forces all trailing ScrollTrigger animations to their end state when the ScrollTrigger is about to affect its own animation (like in a toggleAction)

- NEW: ScrollTrigger recognizes a new "fastScrollEnd" configuration property that will automatically force the associated animation to completion if the scroll velocity exceeds 2500px/second (or whatever you define) when it LEAVES the active area (so onLeave or onLeaveBack). This helps avoid overlapping animations when the user scrolls quickly.

- NEW: ScrollTrigger.isInViewport() method that lets you determine if a particular element is in the viewport. You can even define a certain proportion, like if at least 20% of it is in the viewport like ScrollTrigger.isInViewport(element, 0.2);

- NEW: ScrollTrigger.positionInViewport() method that lets you get a normalized value representing an element's position in the viewport. For example, if the center of myElement is 80% down from the top of the viewport, ScrollTrigger.positionInViewport(myElement, "center") would return 0.8.

- NEW: ScrollTrigger instances have new .previous() and .next() methods that return the ScrollTrigger that's immediately before or after (in the refresh order) which makes it simple to build function-based start/end values that are dependent on the previous one, like start: self => self.previous() ? self.previous().end : "top top"

- NEW: ScrollTrigger snapping is now directional by default (except snap: "labels" because there's already a snap: "labelsDirectional" option) because that is what's most intuitive in the vast majority of situations. To prevent the directional part, you can set directional: false in the snap object, like snap: {snapTo: 1 / 5, directional: false}

- NEW: ScrollTrigger.snapDirectional() is a utility method that you can give a snapping increment **OR** an Array of numbers and it will return a function that you can use to do directional snapping. For example, let snap = ScrollTrigger.snapDirectional(5) returns a function that'll snap in increments of 5 in the direction provided where 1 is positive and -1 is negative, so snap(11, 1) would return 15 whereas snap(11, -1) would return 10.

- NEW: if you return a GSAP animation (Tween/Timeline) from an onEnter/onLeave/onEnterBack/onLeaveBack/onToggle callback, it will be set as the callbackAnimation property, effectively maintaining a reference to the most recent one which will cause it to be affected by preventOverlaps and fastScrollEnd behaviors.

- NEW: ScrollTrigger.clearScrollMemory() erases any recorded scroll positions (this is almost never needed, but just in case...)

- NEW: ScrollTrigger recognizes a new "pinSpacer" property that allows you to specify an element that should be used as the spacer instead of the default behavior where ScrollTrigger creates a DIV element internally. The main reason this is useful is if you're loading an iframe into the pinned element because on resize, the browser would refresh that content due to the fact that ScrollTrigger must remove/add the spacer element as a part of its ScrollTrigger.refresh() calculations.

- NEW: TextPlugin lets you set preserveSpaces: true in order to maintain extra spaces, swapping in   to make them show up in HTML. See https://greensock.com/forums/topic/29060-textplugin-and-format-preservation/

- IMPROVED: in some browsers, a pinType of "transform" could appear to jump/vibrate while scrolling. It's impossible to completely eliminate all of that due to the fact that most modern browsers handle scrolling on a separate thread, thus repainting isn't synchronized but 3.8.0 forces updates more frequently while scrolling to minimize that jitter. See https://greensock.com/forums/topic/29205-scrolltrigger-wobbly-pinning/

- IMPROVED: if you misspell selector text in a ScrollTrigger (like trigger: "#oopps"), you'll see a console.warn() message for easier troubleshooting. See #472

- IMPROVED: TypeScript definition files cover gsap-trial package and "snap" property. See https://greensock.com/forums/topic/28966-how-to-snap-in-gsapto/

- IMPROVED: if a ScrollTrigger's start value is numeric, it will be treated as absolute and won't be pushed further down when you pin the same element multiple times. See https://greensock.com/forums/topic/28845-scrolltrigger-long-scroller-with-multiple-animation-triggers/

- IMPROVED: if you animate a CSS value to a value with a % unit and then reverse all the way back to the beginning, it won't  revert to the equivalent px value (which is what the browser reported as the computed value). So % is maintained.

- IMPROVED: if ScrollTrigger.refresh() is called in an environment where the document/window/body doesn't exist yet, it won't throw an error. See #415

- IMPROVED: PixiPlugin warns if you haven't registered the PIXI object.

- FIXED: if you refresh() a ScrollTrigger inside of a callback after the page has already been scrolled, it may remember that scroll position longer than it should in some rare scenarios.

- FIXED: if you use a "random(...)" value in the "from" part of a .fromTo() animation on a CSS-related value, it wasn't applied properly. See https://greensock.com/forums/topic/28817-random-not-working-in-fromto/

- FIXED: if the <path/> you use for a motionPath contains data that has no commas or spaces between values like 126.87-32.48-310.91-58-499 instead of 126.87,-32.48,-310.91,-58,-499, it may not be aligned correctly. See https://greensock.com/forums/topic/28827-what-am-i-doing-wrong-motionpathplugin/ and https://greensock.com/forums/topic/29031-my-motion-path-needs-offsets-but-why/

- FIXED: if you create a getProperty() getter function and then try passing in a unit, it would always return a number instead of including that unit.

- FIXED: if you set overwrite: "auto" and then before the tween's first render, you alter the progress (like tween.progress(1)), it may not properly overwite conflicting tweens in certain circumstances.

- FIXED: when you .kill() a ScrollTrigger that has a numeric scrub value (or the associated animation), it didn't kill() the scrub tween, thus it wasn't made available for garbage collection. See https://greensock.com/forums/topic/29002-memory-leak-in-scrolltrigger-scrub/?

- FIXED: in very rare circumstances, an addPause() callback may fire more than once.

- FIXED: worked around Firefox bug that could throw an error if matrix values are needed from an SVG that has no width or height

- FIXED: regression in MotionPathPlugin 3.7.1 could cause the final value in a MotionPath animation to be incorrect. See https://greensock.com/forums/topic/29097-motion-path-on-complete-sets-position-to-x0-and-y-0/

- FIXED: GSDevTools didn't recognize if you set the time() of the selected animation to a non-zero value. See https://greensock.com/forums/topic/29113-force-gsdevtools-to-start-at-a-given-timeline-time/

- FIXED: if you .kill() a GSDevTools instance and then attempt to create a new one, the keyboard events may not be listened to correctly. See https://greensock.com/forums/topic/29129-killed-gsdevtools-forgets-to-clean-its-event-listeners/

- FIXED: regression in 3.7.0 caused keyframe animations not to inherit a default duration (or other defaults). See https://greensock.com/forums/topic/29180-keyframes-does-not-work-in-version-371/

- FIXED: if you use gsap.utils.snap() with a number greater than 1 but also has a decimal, it would always eliminate the decimal.

- FIXED: if you have an inline border-top-* style on the <body></body>, ScrollTrigger may eliminate it upon instantiation. It would only happen if it's more specific than "border-top", like "border-top-width for example.

- FIXED: Flip plugin may not properly factor in the page's scroll into the positioning properly under certain circumstances when the element is position: fixed. See https://greensock.com/forums/topic/29343-scrolltrigger-flip-to-fixed-position/ and https://greensock.com/forums/topic/29368-flip-plugin-error-state-position/

- FIXED: regression in 3.7.1 could cause MotionPathPlugin not to properly align a root <svg></svg> element on a path if it has a viewBox attribute with non-zero x/y values.

- FIXED: if you set a liveSnap on a Draggable AND bounds, the bounds may not be respected (only the liveSnap).

- FIXED: if you place a callback on a timeline with a ScrollTrigger that is set to scrub: true and then scroll down on a page past where that callback is and then refresh the browser, the callback may not be triggered. See https://greensock.com/forums/topic/29456-scrolltrigger-seemingly-inconsistently-updates-timeline-calls/

- FIXED: in Draggable, if you use an Array for snap on multiple values like snap: { x: [0], y: [0] }, it would skip all but the first one (in terms of snapping). See https://greensock.com/forums/topic/29466-draggable-snap-only-affecting-x-value/

- FIXED: in Draggable, if you tap (click) on certain mobile devices and the browser refreshed at a slow enough speed, it was possible that the onClick would fire twice. See https://greensock.com/forums/topic/29530-pointerup-fired-for-draggables-onclick-in-mobile-view

- FIXED: if you change the timeScale() of an animation AFTER adding it to a timeline that has smoothChildTiming: false, it may not render at the correct time when the parent is played in reverse
  • Loading branch information
jackdoyle committed Sep 29, 2021
1 parent 4d47e0a commit bf54efb
Show file tree
Hide file tree
Showing 87 changed files with 1,691 additions and 617 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ View the <a href="https://greensock.com/docs">full documentation here</a>, inclu

### CDN
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
```
Click the green "Get GSAP Now" button at <a href="https://greensock.com/?download=GSAP-JS">greensock.com</a> for more options and installation instructions, including CDN URLs for various plugins.

Expand Down
6 changes: 6 additions & 0 deletions SECURITY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Security Policy

Please report (suspected) security vulnerabilities to
**[info@greensock.com](mailto:info@greensock.com)**. You will receive a response from
us within 72 hours. If the issue is confirmed, we will release a patch as soon
as possible depending on complexity.
4 changes: 2 additions & 2 deletions dist/CSSRulePlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}(this, (function (exports) { 'use strict';

/*!
* CSSRulePlugin 3.7.1
* CSSRulePlugin 3.8.0
* https://greensock.com
*
* @license Copyright 2008-2021, GreenSock. All rights reserved.
Expand Down Expand Up @@ -51,7 +51,7 @@
};

var CSSRulePlugin = {
version: "3.7.1",
version: "3.8.0",
name: "cssRule",
init: function init(target, value, tween, index, targets) {
if (!_checkRegister() || typeof target.cssText === "undefined") {
Expand Down
4 changes: 2 additions & 2 deletions dist/CSSRulePlugin.min.js

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

2 changes: 1 addition & 1 deletion dist/CSSRulePlugin.min.js.map

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

12 changes: 7 additions & 5 deletions dist/Draggable.js
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@
transform ? svg.style[_transformProp] = transform : svg.style.removeProperty(_transformProp.replace(/([A-Z])/g, "-$1").toLowerCase());
}

return m;
return m || _identityMatrix.clone();
},
_placeSiblings = function _placeSiblings(element, adjustGOffset) {
var svg = _svgOwner(element),
Expand Down Expand Up @@ -2203,7 +2203,9 @@
if (snapY) {
y = _round(snapY(y));
}
} else if (hasBounds) {
}

if (hasBounds) {
if (x > maxX) {
x = maxX + Math.round((x - maxX) * edgeTolerance);
} else if (x < minX) {
Expand Down Expand Up @@ -2429,8 +2431,8 @@
},
onClick = function onClick(e) {
var time = _getTime(),
recentlyClicked = time - clickTime < 40,
recentlyDragged = time - dragEndTime < 40,
recentlyClicked = time - clickTime < 100,
recentlyDragged = time - dragEndTime < 50,
alreadyDispatched = recentlyClicked && clickDispatch === clickTime,
defaultPrevented = self.pointerEvent && self.pointerEvent.defaultPrevented,
alreadyDispatchedTrusted = recentlyClicked && trustedClickDispatch === clickTime,
Expand Down Expand Up @@ -2923,7 +2925,7 @@
});

Draggable.zIndex = 1000;
Draggable.version = "3.7.1";
Draggable.version = "3.8.0";
_getGSAP() && gsap.registerPlugin(Draggable);

exports.Draggable = Draggable;
Expand Down
4 changes: 2 additions & 2 deletions dist/Draggable.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/Draggable.min.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/EasePack.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}(this, (function (exports) { 'use strict';

/*!
* EasePack 3.7.1
* EasePack 3.8.0
* https://greensock.com
*
* @license Copyright 2008-2021, GreenSock. All rights reserved.
Expand Down Expand Up @@ -201,7 +201,7 @@

for (var p in EasePack) {
EasePack[p].register = _initCore;
EasePack[p].version = "3.7.1";
EasePack[p].version = "3.8.0";
}

_getGSAP() && gsap.registerPlugin(SlowMo);
Expand Down
Loading

0 comments on commit bf54efb

Please sign in to comment.