Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- NEW: gsap.matchMedia() lets you set up animations/ScrollTriggers based on media queries. See https://greensock.com/docs/v3/GSAP/gsap.matchMedia() - NEW: gsap.context() lets you easily record all of the animations/ScrollTriggers that are created in a particular function and then later revert() them. It also greatly simplifies scoping of selector text. It's a boon for React developers dealing with React 18's useEffect() double-call in strict mode which messes with .from() tween logic. See https://greensock.com/docs/v3/GSAP/gsap.context() - NEW: all animations get a new .revert() method that restores the targets to their pre-animated state, including the removal of inline styles that were added by the animation. - NEW: ScrollSmoother recognizes a new effectsPrefix config property so that you can have it look for the data in custom-named attributes like data-scroll-speed and data-scroll-lag by setting effectsPrefix: "scroll-". See https://greensock.com/forums/topic/32521-enhancement-allow-to-specify-an-effect-attribute-prefix/ - NEW: you can set lockAxis: true on an Observer to make it lock into whichever direction the user first drags (touch/pointer only of course), and it will set the new "axis" property to either "x" or "y" and fire the new onLockAxis callback as well. So if the user presses and starts moving horizontally, observer.axis will be set to "x" and it will not fire any of the vertical-related callbacks during that drag (like onUp, onDown, onChangeY, etc.). It resets each time the user presses. - NEW: you can add allowClicks: true on an Observer that has preventDefault: true so that it allows click events to go through. - NEW: you can add capture: true on an Observer to make the touch/pointer-related listeners use the capture phase. - NEW: independent CSS transform properties like "scale", "translate" and "rotate" are recognized and incorporated into the normal "transform" value(s). This also requires setting inline scale/translate/rotate to "none" (GSAP does that to protect from style sheet contamination). See https://greensock.com/forums/topic/33467-scale-property-not-working/ - NEW: onFocusIn callback added to ScrollSmoother config - this will get called when a new element receives focus and you can return false if you want ScrollSmoother to skip ensuring that the element is in the viewport. - NEW: ScrollTrigger.killAll() method - NEW: allowNestedScroll: true option added to ScrollTrigger.normalizeScroll() that allows you to natively scroll descendant elements that have overflow: scroll | auto. See https://greensock.com/forums/topic/31713-scrolltrigger-normalize-scroll-on-custom-scroller/ - IMPROVED: ScrollToPlugin will force scroll-behavior to auto if it is smooth to prevent problems. - IMPROVED: ScrollSmoother leverages ResizeObserver to automatically call ScrollTrigger.refresh() if the content element resizes. - IMPROVED: you can use gsap.quickTo() for simple CSS variables now. See https://greensock.com/forums/topic/32561-animate-variable-font-on-mouse-move/ - IMPROVED: if you pin the container of an element that has a ScrollSmoother effect applied (like data-speed="auto"), it will adjust the start/end positions accordingly. See https://greensock.com/forums/topic/32922-parallax-images-using-smoothscroller-not-working-with-scrolltrigger-pinned-items/ - IMPROVED: if you .endDrag() on a Draggable while the mouse/touch is pressed...and then later release while over the target, that would call the onClick callback but in this edge case it's probably more intuitive to prevent that. See https://greensock.com/forums/topic/33082-onclick-fired-long-after-enddrag-if-still-holding-mouse-button-and-releasing-it-over-the-previously-dragged-object/ - IMPROVED: ScrollSmoother now attempts to adjust for ScrollTriggers whose trigger is the DESCENDENT of one that has a "speed" effect applied. See https://greensock.com/forums/topic/33342-gsap-scrolltrigger-locomotive-scroll-data-scroll-speed-issue/ - FIXED: if you define a pinSpacer element on a ScrollTrigger, it didn't set the width/height to force it to stay open during pinning. See https://greensock.com/forums/topic/32052-scrolltrigger-spacer-element-collapses-on-pin/ - FIXED: if you set absoluteOnLeave: true in a Flip.from() and there are elements in the Flip that are display: none, it could incorrectly set the width/height. See https://greensock.com/forums/topic/32099-absoluteonleave-problems/ - FIXED: if you have ScrollSmoother applied to a page with a ScrollTrigger that has snapping applied, there's a chance the snapping would get interrupted and re-applied multiple times. - FIXED: if you define an Array of keyframes in a tween and you also define a duration on that tween, it may render they keyframes at the wrong playhead position in a specific edge case. See #500 - FIXED: if a ScrollSmoother's wrapper element is INSIDE another element with a tabIndex (very uncommon), when it receives focus it could make the window scroll immediately to the top. See https://greensock.com/forums/topic/32139-scrollsmoother-gatsby-%E2%80%94-first-click-instantly-scrolls-to-top-of-page/ - FIXED: if you animate the width or height of an element to/from a percentage-based value to/from a different unit INSIDE a parent with display: flex, it may not convert the unit measurements properly. See https://greensock.com/forums/topic/32151-how-to-update-the-width-when-resize-screen-on-timeline-with-scrolltrigger/ - FIXED: worked around an iOS Safari rendering bug related to <circle> SVG elements with vector-effect="non-scaling-stroke"; when animating the scale there could be a very noticeable jitter. - FIXED: a trusted type error in Draggable - see #502 - FIXED: if you use a function-based "snap" value for a Draggable of type: "scrollLeft" | "scrollTop", the parameter value would be inverted (negative instead of positive) - FIXED: when using ScrollSmoother on iOS with snapping, it may intermittently stutter/jump while in the process of snapping. See https://greensock.com/forums/topic/31842-scrollsmoother-scrolltrigger-resize-broken/#comment-161042 - FIXED: if you apply element-based bounds to a Draggable, it could miscalculate the bounds if the parent element is scrolled. See https://greensock.com/forums/topic/32255-migrating-a-demo-to-the-latest-version/ - FIXED: if you have a snap applied to a ScrollTrigger and apply ScrollSmoother to the page and then scroll down, trigger the snap, and then resize the window, it may throw off the scrolling behavior (positioning). See https://greensock.com/forums/topic/31842-scrollsmoother-scrolltrigger-resize-broken/?do=findComment&comment=161042 - FIXED: on iOS devices, ScrollSmoother content may vibrate in certain situations. See https://greensock.com/forums/topic/31969-scrollsmoother-freaking-out-on-touchmove/#comment-161140 - FIXED: if you call .effects() on a ScrollSmoother instance to CHANGE the effect(s) on multiple elements, it may not work for all of them. - FIXED: gsap.utils.snap() may return a result that is slightly off in certain very uncommon scenarios. Like rounding 0.29 to the nearest 0.01 may return 0.28. See https://greensock.com/forums/topic/32420-snap-function-issue/ - FIXED some TypeScript definitions like #504 - FIXED: if you try accessing the ScrollSmoother's progress property from within its onUpdate, the very first time (during construction) it would throw an error. See https://greensock.com/forums/topic/32568-scrollsmoother-selfprogress-error-in-chromium-based-browsers/ - FIXED: if you set an Observer's type to "pointer" only, it would also work on touch-only devices. See https://greensock.com/forums/topic/32619-limit-observer-to-pointer/ - FIXED: if you set a toggleClass on ScrollTrigger whose start position would be already triggered when the page is scrolled all the way to the top, it may not set the class initially. - FIXED: an Observer's onChangeX/Y could be called even when there wasn't a change if the tolerance was 0 (the default) - FIXED: if you reverse a timeline and THEN add more animations to it (which would make it longer), it didn't adjust its startTime() on the parent accordingly, so you may see it play at least part of the animation. See https://greensock.com/forums/topic/32704-why-my-navbar-is-stopping-in-the-middle-in-react-but-not-in-normal-javascript/ - FIXED: for ScrollSmoother, if you apply a data-speed="auto" on an element that starts out in the viewport and the element is aligned at the bottom of its container, the parallax positioning may be a bit off (start out too high). - FIXED: a regression caused ScrollTrigger.matchMedia() to potentially not fire properly on resize if you disable the "resize" autoRefreshEvent via ScrollTrigger.config(). See #508 - FIXED: if you set preserveSpaces: true on a TextPlugin animation, it would only preserve the spaces in the ORIGINAL text (not the text you're animating to). See https://greensock.com/forums/topic/33068-textplugin-not-preserving-sequential-spaces/ - FIXED: if you call .endDrag() on a Draggable (only on certain Android browsers), it may not fire the onDragEnd() callback. See https://greensock.com/forums/topic/33071-problem-with-draggable-on-android-browsers/ - FIXED: Draggable's removeEventListener() wouldn't work for an index of 0. See #510 - FIXED: regression in 3.6.0 that caused GSAP to skip setting values during a tween if the start and destination values matched exactly (performance optimization, but discovered there are some very rare edge cases that benefit from even non-animating values being set during the tween). - FIXED: an error could be thrown when attempting to animate a transform-related value of an element that is NOT in the DOM and the nextSibling of the target is an empty text node. See #511 - FIXED: if you scroll down and then resize the screen, occasionally ScrollSmoother would not let you scroll all the way back up to the top (miscalculate the starting position). - FIXED: if you set a ScrollTrigger's end to "max" and it is pinned, in very rare scenarios it could cause the element to have a negative y transform applied because the "end" might get set to a value lower than the "start". See https://greensock.com/forums/topic/33469-pinning-divs-on-top-of-each-other-vertically-but-below-certain-divs/
- Loading branch information
