Tags: awvisual/GSAP
Tags
3.7.1 - IMPROVED: made the "wheel" event listener passive in ScrollTrigger. See greensock#460 - IMPROVED: made it possible to use CustomEase without loading GSAP. - IMPROVED: function-based inertia "end" values now receive the velocity as the 2nd parameter which makes it much easier to do directional snapping - IMPROVED: if you alter the repeatDelay() after the animation has already started, it maintains the playhead's local position as long as the parent timeline has smoothChildTiming enabled. - FIXED: if you call .update() with the "sticky" parameter true while dragging after the element has been changed in the document flow (repositioned), it may render at the incorrect position. - FIXED: if you kill() a ScrollTrigger instance, the previous scroll position may still be remembered. So, for example, in a SPA that goes to a new page and kills all the ScrollTriggers, it may still keep the scroll position instead of going back to the top/left. See https://greensock.com/forums/topic/28592-scrolltrigger-and-nextjs-scroll-position-after-route-change/ and https://greensock.com/forums/topic/28575-scrolltrigger-issue-with-scroll-position-when-i-navigate-to-a-page/ - FIXED: if ScrollTrigger.update() was called during a ScrollTrigger.refresh(), it could cause pinned elements not to be positioned correctly. See https://greensock.com/forums/topic/28547-having-an-issue-with-scrolltrigger-locomotive-scroll/ - FIXED: worked around a Firefox bug that could throw an error if you tried to Flip a root <svg> element. Firefox reports getCTM() as null on <svg> elements. - FIXED: improved Flip plugin's ability to correctly size root <svg> elements - FIXED: regression in 3.7.0 caused a tween's onStart callback to be called twice. See https://greensock.com/forums/topic/28644-370-onstart-in-fromto-fires-twice/ - FIXED: if you define a "snap" value for ScrollTrigger as an Array in the shorthand syntax, like snap: [0, 0.1, 0.7, 1] instead of snap: {snapTo: [0, 0.1, 0.7, 1]}, it didn't work properly. - FIXED: if you resume a tween whose playhead is at the VERY end, it could render one last time unnecessarily, calling the onComplete when it really shouldn't because the playhead didn't move. - FIXED: regression in GSDevTools.create() caused it not to display all animations with "id" properties in the drop-down list. See https://greensock.com/forums/topic/28706-gsdevtools-animation-ids-not-working/ - FIXED: an edge case could cause MotionPathPlugin could use a large amount of memory. See https://greensock.com/forums/topic/28744-multiple-gsap-motion-path-traces-on-the-same-timeline-simultaneously/
3.7.0 - NEW: percentage-based position parameter options for timelines - A value like "-=25%" would overlap by 25% of the inserting animation's totalDuration, or "<25%" would insert it 25% into the previous animation. See docs for details. Related: greensock#444 - NEW: gsap.utils.selector() returns a selector function that's scoped to a particular element (or React ref or Angular ElementRef) - no need to create a ref for each and every element you want to animate, for example! - NEW: gsap.utils.toArray() accepts an optional 2nd parameter, the Element on which .querySelectorAll() should be called (the scope) if selector text is passed in. Like gsap.utils.toArray(".box", myElement) will find all the descendant elements of myElement with the class of "box". - NEW: added getTween() method to ScrollTrigger that allows you to get the scrub tween (default) or the snapping tween (getTween(true)). - NEW: ScrollTrigger.scrollerProxy() recognizes a fixedMarkers: true option that'll prevent it from moving the scroller markers. It can be useful in setups like described at greensock#452 - NEW: ScrollTrigger recognizes a new pinnedContainer property which allows you to specify an ancestor element that gets pinned which would affect the positioning of the start/end values. For example, if the parent element gets pinned for 300px, the start/end values of a ScrollTrigger on that child element should be pushed down by 300px. See https://greensock.com/forums/topic/28255-scrolltrigger-not-delaying-within-pinned-element/ - NEW: MotionPathPlugin recognizes a new "fromCurrent" boolean value that, when false, causes it NOT to include the current property values in an Array that's passed in for the "path". For example, if the target is currently at x: 0, y: 0 and then you do a motionPath: {path: [{x: 100, y: 100}, {x: 200, y: 0}, {x: 300, y: 200}]} tween, by default it would add {x: 0, y: 0} to the start of that Array so that it animates smoothly from wherever it currently is but now you can set fromCurrent: false to avoid that and just have it jump to x: 100, y: 100 at the start of that tween. See https://greensock.com/forums/topic/28421-motionpathplugin-option-to-not-add-current-targets-position-to-the-start-of-the-path-array/ - NEW: Helper function added to the docs that can deliver onReverse() functionality plus much more. It's called trackDirection(). See https://greensock.com/docs/v3/HelperFunctions#onReverse. Related to greensock#144 (comment) - IMPROVED: Flip plugin has better support for SVG elements (it was created for regular DOM elements) - IMPROVED: better support for special characters inside string-based "random(...)" values. See https://greensock.com/forums/topic/28077-using-special-symbols-and-characters-in-gsap-text/ - IMPROVED: if you enable() a ScrollTrigger (after it was disabled), it now resets itself by default rather than factoring in the previous position. So, for example, if its progress was 1 when it was disabled, and then you scroll the page all the way up and enable() it, it previously would fire its onEnterBack and onLeaveBack callbacks but now it doesn't. You can control this behavior with the new reset parameter of the enable() method. - IMPROVED: better support in ScrollTrigger for CSS grid properties on pinned elements - IMPROVED: ScrollToPlugin will sense if a scroll-snap-type is set on the target and if so, it will set it to "none" during the scrollTo animation, and then re-apply it at the end. See https://greensock.com/forums/topic/26181-scroll-snap-and-scrolltoplugin-not-playing-nice-togehter/ - IMPROVED: 2 extra decimal places of precision for generic tweens in order to add extra smoothing to ScrollTrigger scrubbing of very long timelines, for example. See https://greensock.com/forums/topic/28148-scrolltrigger-and-lottie-animation-flickering-problem/ - IMPROVED: TypeScript definition fixes and enhancements - IMPROVED: for Draggables of type:"rotation", cursor changes are enabled - IMPROVED: you can stagger keyframe tweens - FIXED: if you animate a non-CSS property on a DOM element (like "innerHTML") with a .fromTo(), the "from" portion may not be pulled directly from that vars object. See https://greensock.com/forums/topic/27644-fromto-starting-from-0-instead-of-passed-value-when-1000/ - FIXED: .from() scrambleText animations with a starting value of "" didn't work properly. - FIXED: ScrollTrigger.saveStyles() could cause inline CSS styles to stay reverted (like for from() tweens) when ScrollTrigger.refresh() was triggered aside from a "matchMedia" event. See https://greensock.com/forums/topic/25944-problem-with-scrolltriggersavestyles-and-scrolltriggermatchmedia - FIXED: a timeline's iteration() could return an incorrect value if called from inside its own onRepeat callback. See https://greensock.com/forums/topic/27643-timeline-repeat-iteration-vs-standalone-tween-repeat-iteration/ - FIXED: a ScrambleTextPlugin from() tween could seem to have a gap at the beginning caused by an internal ease. - FIXED: if you have a stagger applied to a ScrollTrigger animation that's a .fromTo() or .from(), it may not render it in the initial state before reaching the start scroll position (regression in 3.6.0). See https://greensock.com/forums/topic/27664-gsap-3-timeline-stagger-with-immediaterender-not-working/ - FIXED: if you didn't define an "animation" for GSDevTools (meaning it uses the globalTimeline), and then select another animation in the drop-down UI that has a delay, it wouldn't isolate that animation properly. See https://greensock.com/forums/topic/27690-question-about-dynamic-tweens-and-gsdevtools/ - FIXED: if you put a non-scrubbing scrollTrigger on a tween that has a delay and a stagger, it could skip the delay. See https://greensock.com/forums/topic/25610-problem-delay-property-not-working-with-srolltrigger/ - FIXED: if you tried using a modifier for a CSS variable, it didn't work. See https://greensock.com/forums/topic/27793-modifiers-with-vars/ - FIXED: the "restart" toggleAction of ScrollTrigger now factors in any delay value that was specified in the tween/timeline. - FIXED: if you called ScrollTrigger.update() from inside an onUpdate callback on an immediately-rendering tween that has a ScrollTrigger, it could throw an error. - FIXED: if a MotionPathHelper's tween had a target that started at non-zero x/y values, those offsets weren't factored in (so the editable path wouldn't match up with where it should be). - FIXED: a regression in 3.6.1 could cause repeatRefresh on a timeline not to work properly in one particular case. See https://greensock.com/forums/topic/28031-gsap-361-timeline-issue/ - FIXED: if you use a snap duration on a ScrollTrigger that's shorter than the scrub duration, it could lead to odd results. See https://greensock.com/forums/topic/28112-using-scrolltrigger-w-fixed-position-sections/ - FIXED: in extreme cases, inertia in snapping could cause ScrollTrigger to scroll past the maximum or minimum, consequently restarting the snap. Overall, cleaned up several aspects of snapping in ScrollTrigger. - FIXED: if you don't specify an animation for GSDevTools, it could fire callbacks of the animations when the page loads initially (and then again at the proper times). See https://greensock.com/forums/topic/19465-timelines-oncomplete-callback-fired-twice-when-gsdevtools-added/?tab=comments#comment-137962 - FIXED: if you create ScrollTriggers in a .matchMedia() and then resize to where all ScrollTriggers are removed, and then go back to a size where it creates the ScrollTriggers again, it could return to the scroll position from that initial state (before all ScrollTriggers were removed). See https://greensock.com/forums/topic/28114-scrolltrigger-does-not-revert-elements-to-their-original-values-on-resize/?tab=comments#comment-138731 - FIXED: onComplete didn't fire in a zero-duration timeline. See greensock#448 - FIXED: when you set markers: true on a ScrollTrigger that uses a scroller with position: fixed, it won't change it to position: relative. See greensock#452 - FIXED: if you gsap.getProperty(svgElement, "transformOrigin"), it would always return 0px 0px 0px for SVG elements. - FIXED: if you cause the tween to render at a different time from INSIDE its onStart callback, it would still render at the original time. - FIXED: if ScrollTrigger.update() was called from within a refresh handler, it could result in skipping the refresh() on some of the ScrollTriggers under certain conditions. - FIXED: if you tried to render a .from() or .fromTo() tween at a negative time value (like rewinding it past the start), it may render the initial values rather than reverting. - FIXED: if you try to set() an empty string value (""), it could be interpreted as "0". And if you use "=" as the second character in a string, it may not work correctly because it's interpreted as a relative value prefix, like "+=" or "-=". See https://greensock.com/forums/topic/28257-set-empty-strings/ - FIXED: if you animate to an invalid scale, like NaN, it wouldn't default to 0 and the transforms wouldn't render properly (because of that invalid value). See greensock#453 - FIXED: if you timeline.tweenFromTo() an immediately alter its progress(), it may not render at the appropriate time. - FIXED: if you use Draggable for a position: fixed element that has movement limited to one direction, on Android it may not drag properly. See https://greensock.com/forums/topic/28357-draggable-android-issue-with-position-fixed/ - FIXED: timeline.recent() may return the incorrect child immediately after a .fromTo()
3.6.1
- NEW: you can define onStart, onComplete, and onInterrupt callbacks in the snap:{} object of a ScrollTrigger to sense when snapping starts, completes or gets interrupted. See https://greensock.com/forums/topic/27305-scrolltrigger-feature-request-onsnapinterrupt-callback/
- NEW: you can prevent ScrollTrigger from factoring inertia into snapping by passing in inertia: false via a snap object, like snap: {snapTo: "labels", inertia: false, duration: 0.5}
- NEW: MorphSVGPlugin.normalizeStrings() method that lets you feed in two path data strings and it'll return an Array with normalized strings that contain the same number of points.
- NEW: you can append "nowrap" to a drawSVG value to prevent the stroke from wrapping/looping, like drawSVG: "80% 120% nowrap".
- NEW: added a LottieScrollTrigger helper function to the docs: https://greensock.com/docs/v3/HelperFunctions#lottie
- IMPROVED: removed pixel snapping in ScrollToPlugin because most browsers support sub-pixel scroll values now.
- IMPROVED: when you kill() a tween/timeline that's attached to a ScrollTrigger, it will also kill that ScrollTrigger.
- FIXED: if a zIndex is set on a Flip.from() call, it may take 1 tick before being applied (unless you set immediateRender: true). Now setting a zIndex will automatically make the animation default to immediateRender: true.
- FIXED: TypeScript improvement for PixiPlugin to accommodate string-based (relative) values for x, y, and a few others. See greensock#430
- FIXED: regression in 3.5.0 caused ScrollToPlugin's onAutoKill callback not to get triggered properly. See https://greensock.com/forums/topic/26840-scrolltoplugin-onautokill-callback-not-firing-timeline-issues/
- FIXED: if you animate a path that has vector-effect="non-scaling-stroke", it could throw an error. See https://greensock.com/forums/topic/26915-drawsvg-console-error-with-non-scaling-strokes/
- FIXED: in certain rare cases, setting the playhead of a repeating timeline to a value that crosses the repeat boundary backwards (spanning iterations), it could render at the start incorrectly.
- FIXED: if you attempt to use Draggable on a shadow dom element, it could throw an error (regression in 3.6.0). See greensock#431
- FIXED: onStart fired on zero-duration tweens/timelines even though it shouldn't (onStart is for when the playhead moves from the 0 position). Related to greensock#419
- FIXED: if you had default units for x, y, width, or height set to something other than "px", it could affect Flip. See https://greensock.com/forums/topic/26977-flip-conflicting-with-altering-units-in-config/
- FIXED: a regression in 3.6.0 could cause problems when animating a CSS variable that's a color.
- FIXED: when plotting global coordinates of a root <svg> element (which could happen in Flip or MotionPathPlugin or Draggable), if the contents of that <svg> are scaled it could offset things incorrectly. See https://greensock.com/forums/topic/27152-flipping-svgs/
- FIXED: if an animation is killed from within its onRepeat callback, it could render slightly past where it should. See https://greensock.com/forums/topic/27176-gsap-3-tween-a-timeline-object/
- FIXED: changed "mousewheel" event listening to "wheel" in ScrollTrigger for better compatibility. See greensock#434
- FIXED: if you used a ScrollTrigger snap of "labelsDirectional", in rare situations it might snap again after the initial snap, going to the next label, then the next.
- FIXED: in an extremely uncommon scenario, a ScrollTrigger that's supposed to snap might not snap if you scroll very slowly and interrupt the snap.
- FIXED: regression in 3.6.0 caused timeline.tweenTo()/tweenFromTo(), to ignore an ease defined in the vars (it always used ease: "none"). See https://greensock.com/forums/topic/27351-tweento-ease-not-working/
- FIXED: if you set a "transform" value to a matrix() on an SVG element, it could be decomposed incorrectly in certain scenarios. This could, in very rare situations, also affect how transforms are parsed for regular DOM elements too (scaleY could be inverted) See https://greensock.com/forums/topic/27394-setting-gsaps-matrix-transform-data-to-match-that-defined-in-an-svg/
- FIXED: Draggables of type: "top,left" didn't properly update their deltaX property.
- FIXED: Draggables of type: "top,left" could, in rare circumstances, dispatch events as though it had been dragged even when it was only clicked (not moved beyond the minimumMovement). So the "onClick()" wouldn't fire on occasion.
- FIXED: if you create a timeline-based ScrollTrigger like gsap.timeline({scrollTrigger:{...}}) that performs pinning and then immediately create other ScrollTriggers for things further down on the page, and you do so AFTER the initial page load, the subsequent ScrollTriggers may not factor in the pinning properly until you call ScrollTrigger.refresh(). See https://greensock.com/forums/topic/27495-scrolltrigger-react-trouble-when-pinnings-multiple-elements-on-the-same-page/
- FIXED: there's a very rare scenario that could cause an infinite loop when you kill() the last ScrollTrigger, as described at greensock#440
- FIXED: MotionPathHelper.editPath() correctly handles closed paths now (start and end anchors are merged).
- FIXED: if repeatRefresh was set on a repeating timeline, it could do the refresh twice in a row on the same tick (1 extra time). See https://greensock.com/forums/topic/27571-timeline-function-called-twice-per-loop/
3.6.0 - NEW: Flip Plugin smoothly animates between DOM layout changes. See https://greensock.com/flip - NEW: DrawSVGPlugin can now accommodate values outside of the 0-100% range, meaning you can loop/wrap strokes easily. We even shaved off some kb in the process. - NEW: you can set a ScrollTrigger's snap value to "labelsDirectional" and instead of snapping to the closest label, it will snap to the NEXT or PREVIOUS timeline label based on the velocity/direction of the timeline's playhead. This means users don't have to scroll beyond halfway between sections, for example - if they scroll even a little bit and release, it will go to the next/previous label in that direction. - NEW: hex colors with alpha are recognized, like #fd5e53ff. See https://greensock.com/forums/topic/26703-text-shadow-property-not-animated/ - IMPROVED: added the ability for ScrollToPlugin to accommodate a function-based value, like scrollTo: () => ... - IMPROVED: when animating CSS-related values in a .fromTo() animation, GSAP will attempt to pull the starting values directly from the "from" vars object instead of using the computed values that the browser reports so that you can do things like gsap.fromTo(el, {top: "calc(10vh / 2)"}, {top: "calc(50vh / 2)"}). Notice that the formatting needs to match for complex strings like that. See the original request at https://greensock.com/forums/topic/25568-problems-with-calc-values/ - IMPROVED: worked around a Firefox bug that incorrectly reports getBoundingClientRect() when the element's scale (transform) is exactly 0 - it could interfere with the align feature in MotionPathPlugin. - IMPROVED: CSS variables now attempt to interpolate between units like if --radius: 8vh is animated to 1em, for example. - IMPROVED: if you set an xPercent or yPercent on an element and then clearProps, the next time transforms are parsed, the percentage-based translation will be prioritized over px-based translation because that's typically the desired behavior. - IMPROVED: gsap.utils.random() was slightly less likely to choose a value at the very minimum or maximum, but now it's equal across all values. See https://greensock.com/forums/topic/26524-does-gsaputilsrandom-include-or-exclude-its-minmax/ - IMPROVED: Draggable's onClick callback now gets triggered by code-triggered events on the target element, like element.click(). See https://greensock.com/forums/topic/26513-draggable-html-click-event-not-triggering-onclick-handler - IMPROVED: ScrollTrigger copies the z-index to the pin-spacer element (for pinned elements). See https://greensock.com/forums/topic/26570-scrolltrigger-pinning-and-z-index-question/ - IMPROVED: if you don't define a "trigger" or a "start" on a ScrollTrigger, it would default to using <body> as the target and start: "top top" which in some rare cases might cause odd start/end values (like if you translate things higher and stretch beyond the top of the <body>), so now it defaults to an absolute start of 0. See https://greensock.com/forums/topic/26626-customscrollbar-scrolltrigger-draggable/ - FIXED: minor TypeScript improvements, like https://greensock.com/forums/topic/25346-morphsvg-shape-error-angular-typings/ and greensock#421 and greensock#422 - FIXED: if a paused child animation of a completed timeline resumes, and that parent timeline has smoothChildTiming: true, it wasn't getting re-activated. See https://greensock.com/forums/topic/25349-no-transition-instant-snap-issue/ - FIXED: if a CSS variable had a space in front of it where the CSS was declared, like --var: 20px, that would interfere with unit conversion in gsap.getProperty(element, "--var", "em"), for example. - FIXED: in GSDevTools, if you resume a timeline via code that had also been paused via code (not through the GSDevTools interface), it wouldn't be reflected as such by the UI and it could cause it to loop. - FIXED: in browserless environments (or SSR that may make calls before the DOM is available), a call to ScrollTrigger.refresh() could throw an error in 3.5.1. See greensock#415 - FIXED: if immediateRender was set to true on a timeline.tweenTo()/tweenFromTo(), it could throw an error. See greensock#414 - FIXED: if you try to do a scrollTo animation to an element that doesn't exist, it would throw errors instead of defaulting to 0. - FIXED: regression in Draggable 3.5.0 caused fixed-position elements not to factor scroll position into their x/y drags (they could jump if you scroll down and then drag a fixed-position element). Only if there was no margin or padding on the <body>. See https://greensock.com/forums/topic/23088-draggable-fixed-elements-disappear-when-dragging-after-scroll/?tab=comments#comment-123425 - FIXED: animating a complex string value with extremely small numbers that had scientific notation like -4.1245e-15 didn't work properly. See https://greensock.com/forums/topic/25485-tween-float-values-in-svg-path/ - FIXED: if you set pinType: "transform" and markers: true but you do NOT specify a scroller on a ScrollTrigger, it could throw an error. See https://greensock.com/forums/topic/25606-bug-report-scrolltrigger-pintype-and-markers/ - FIXED: if you tried to animate zIndex without setting autoRound: true, it didn't work properly in some browsers because they ignore any values that contain decimals. - FIXED: in very rare cases, an infinitely-repeating animation with a small duration that's set to a progress of 1 could render incorrectly due to a rounding issue. - FIXED: if you create two tweens that BOTH affect the same property, and one has a ScrollTrigger that hasn't fired yet but overwrite is set to "auto", it could lock in the initial value incorrectly (before the other tween completes). - FIXED: if the target of a Draggable has its transforms cleared/uncached and that Draggable has bounds applied, it could cause the target to be incorrectly positioned onPress. - FIXED: if you SplitText an element with type: "lines" and it doesn't have a previousElement in the DOM, it could throw an error. - FIXED: if you invalidate() a timeline whose playhead is at a non-zero position, it could initialize its child tweens in the wrong order leading to their starting values being incorrect in certain situations. - FIXED: "xPercent" and "yPercent" are now correlated (measurement-wise) in MotionPathPlugin and the unit is automatically pulled from Array-based values passed in, like [{left:"20%"}, {left:"50%"}]. See https://greensock.com/forums/topic/25747-migrating-a-gsap-2-bezier-to-gsap-3-motionpath/ - FIXED: if the last point past in an Array to MotionPathPlugin was a duplicate of the previous one, it would plot the curved path oddly (wiggling). See https://greensock.com/forums/topic/25775-motion-path-issue/ - FIXED: if you define a %-based translation in x/y/translateX/translateY (which isn't recommended since xPercent/yPercent is the proper way to do that), and then attempt to animate to a px-based value, it could convert between units incorrectly. See https://greensock.com/forums/topic/25801-gsapdefaults-with-modifiers/ - FIXED: if you use ScrollTrigger.saveStyles() before creating a non-scrubbing ScrollTrigger with an animation associated with it, and then scroll to a place where that animation is at a non-zero position, a refresh() (resize) could cause the CSS styles to get reset without getting updated with that animation's changes. See https://greensock.com/forums/topic/25812-scrolltrigger-weird-behavior-when-resizing/ - FIXED: if you gsap.globalTimeline.clear(), it could cause an initial jump when starting to play subsequent animations. - FIXED: if you accidentally set a ScrollTrigger's "start" to a position ABOVE the top of the page (invalid) and it has pinning enabled, it could offset the pinned element that amount from the top/left of the page. - FIXED: worked around a Safari bug that could cause snapping in a ScrollTrigger to seem jerky and take a long time if the page was zoomed. Safari reports the scroll position incorrectly as 1 pixel off, so if scrollTop is set to 125, for example, and Safari would report it as 124. See https://greensock.com/forums/topic/25635-scrolltrigger-snap-issue/ - FIXED: if you used complex selector text for a MorphSVGPlugin path multiple times, it could think the path was malformed. See https://greensock.com/forums/topic/25852-morphsvg-malformed-path-problem/ - FIXED: if you load GSDevTools and also have a ScrollTrigger with a numeric scrub value and attempt to scroll sooner than 2 seconds after page load, the scrubbing wouldn't work initially. - FIXED: zIndex animations that start or end with "auto" didn't round the value during the animation (and browsers refuse to render non-whole numbers for zIndex). - FIXED: if you define a motionPath with a "start" and "end" that contain a value that's **almost** a whole iteration apart like start: 2.8 / 5 (0.5599999999999999), end: 2.8 / 5 + 1 (1.56), it would get clipped and act like it has a length of 0. See https://greensock.com/forums/topic/25938-animate-text-on-an-svg-path/?tab=comments#comment-125937 - FIXED: if you use ScrollTrigger.saveStyles() on elements that are also controlled by a non-scrubbing ScrollTrigger from() animation created in a ScrollTrigger.matchMedia(), resizing the window could cause the inline styles not to be rendered correctly at the from() position. See https://greensock.com/forums/topic/25944-problem-with-scrolltriggersavestyles-and-scrolltriggermatchmedia/ - FIXED: if you kill() a tween and then tried to play() it again, it would work (unless you called kill() twice). See https://greensock.com/forums/topic/25963-killing-the-tween-issue/ - FIXED: if you had a .set() call right at the very beginning of a timeline, rewinding to that spot after the playhead had moved forward would cause the set() to revert to its very starting values. See https://greensock.com/forums/topic/26049-issue-with-starting-positions/ - FIXED: if you created a ScrollTrigger with a refreshPriority inside a gsap.timeline() and called ScrollTrigger.refresh(), the priority may not be set properly unless ScrollTrigger.refresh() is called after one tick. See https://greensock.com/forums/topic/26126-2-animations-on-same-page-second-one-loading-first-causing-issues - FIXED: if a motionPath tween used negative start/end values such that they'd wrap (in the negative direction), it wouldn't work. See https://greensock.com/forums/topic/26197-bug-motionpathplugin-unsets-element-position-when-looping-in-negative-direction/ - FIXED: if a motionPath tween used a start and end value that were almost exactly 1 apart but used lengthy decimal values (like beyond 5 decimal places), it may act like the path has a length of zero. See https://greensock.com/forums/topic/26338-where-is-the-bug/ - FIXED: ScrollTrigger showed a console.warn() in Safari regarding scrollBehavior not being a valid property because Safari doesn't support it. That warning is removed now. See https://greensock.com/forums/topic/25199-sliding-window/?tab=comments#comment-127143 - FIXED: worked around some Android/MS issues that affected Draggable's allowNativeTouchScrolling. See https://greensock.com/forums/topic/24166-cross-browser-issues-with-draggable-and-allownativetouchscrolling/ - FIXED: if you add extra padding to a CSS value with a unit, like "3.1000rem", it could get interpreted incorrectly. See https://greensock.com/forums/topic/26352-possible-bug-with-rem-values-like-3100rem/ - FIXED: if you set pinSpacing: false and pinned the SAME element multiple times, on subsequent refresh() calls (like on window resize), a cached value was used which could cause the element to move further and further from where it's supposed to be on each refresh(). See https://greensock.com/forums/topic/26411-multiple-pinned-scrolltriggers-on-the-same-element-wrong-offset-on-resize/ - FIXED: if you go full-screen on an element that's in an iframe, it could force a refresh() which would reload that inframe content, effectively making it impossible to go full-screen. See https://greensock.com/forums/topic/26281-full-screen-video-issue/ - FIXED: a Chrome/Brave (Webkit) update caused ScrollTriggers with pinReparent: true to be positioned incorrectly in some cases because inset CSS values contaminate top/left positioning. - FIXED: if you re-create a ScrollTrigger.scrollerProxy() on the same element multiple times, it would cache the first one and use the getter/setter functions for that (always). See https://greensock.com/forums/topic/26468-scrolltriggerscrollerproxy-stopped-after-route-change/ - FIXED: disallowed adding the following keys to gsap.defaults() and gsap.config(): __proto__, constructor, and prototype - FIXED: in some rare cases with negative numbers, gsap.utils.snap() would return an incorrect value. See https://greensock.com/forums/topic/26551-bug-in-snap-utility/ - FIXED: if you set dragClickables: false on a Draggable, event.preventDefault() could be called [incorrectly] when clicking on a clickable element like an <a> or <button> immediately after dragging the ancestor element, meaning the link wouldn't be followed (typically just on mobile devices). See https://greensock.com/forums/topic/26547-gsap-draggable-plugin-issues-with-dragclickables-in-touchscreen/ - FIXED: if you set up a ScrollTrigger with a snap value, on a Windows desktop device it may not kill the snapping immediately when the user attempts to scroll with the mousewheel. See https://greensock.com/forums/topic/26600-scrolltrigger-intermittent-scroll-locking-during-snapping/ - FIXED: if you used SplitText to split the same element multiple times without "words", it could incorrectly lose spaces in some rare cases. - FIXED: if you fed duplicate values in at the very start of a motionPath Array, it could hang. For example, if you do a .fromTo() and set the initial values AND put those same values into the start of the "path" Array, that'd trigger the issue. See https://greensock.com/forums/topic/26663-browser-crash-while-using-the-motion-path-plugin/ - FIXED: TypeScript definitions updated for gsap.timeline so that if you gsap.registerEffect({... extendTimeline: true}) it'll allow any property to be added to timelines. - FIXED: if you kill() a ScrollTrigger with a pin, and then re-create it and the pinned element has different margins, the old ones stuck around instead.
3.5.1 - FIXED: regression in 3.5.0 caused an error to be thrown in IE10 (related to new TypedArrays support). See https://greensock.com/forums/topic/23156-what-browsers-are-supported-by-gsap-3/ - FIXED: some minor TypeScript definition file improvements - FIXED: if you pin something with ScrollTrigger on a page that initially has NO scrollbar and the contents fill the width, for example, it would end up showing a horizontal scrollbar because the width is set without the scrollbar and then one gets added due to the pinSpacing. So now ScrollTrigger will sense this condition and add overflow-y: scroll to the inline style. See https://greensock.com/forums/topic/25182-scrolltrigger-width-of-page-increase-where-markers-are-set-to-false/ - FIXED: if you set start: 0 on a ScrollTrigger and defined a trigger (which doesn't make much sense since numbers are interpreted as absolute thus there's no point in defining a trigger), it could ignore the start and use the default of "0 100%". - FIXED: in some rare cases if you have a repeating timeline and jump to a certain spot AFTER it has already played once, it could render the child animations in the wrong order. See https://greensock.com/forums/topic/25211-unexpected-behaviour-when-moving-group/ - FIXED: if you have a ScrollTrigger set to pinReparent: true, occasionally it might not render the pinned element in the correct spot after a resize. See https://greensock.com/forums/topic/25150-scrolltrigger-and-mobile-navbar/ - FIXED: animating CSS-related properties to a string with padded zeroes at the end (like x: "20.400") causes those zeroes to be interpreted as units. See https://greensock.com/forums/topic/25226-problem-with-set-position-x-with-svg/ - FIXED: if you have a zero-duration tween in a timeline, then move that timeline's playhead to a place BEFORE that zero-duration tween and then backwards, it might initialize when it shouldn't, potentially leading to the starting values being incorrect. - FIXED: if you pass in a CustomEase that has part of the line extending beyond the final position on the x-axis (EXTREMELY rare), it could return an incorrect final value. - FIXED: if you set a percentage-based max-width or max-height on a ScrollTrigger's pinned element, it may not be applied properly (it becomes a max-width/height of the pin-spacer element). - FIXED: in a ScrollTrigger with a matchMedia() that has a snap applied, if you resize to a different break point and then go back again, the snapping may not work anymore. - FIXED: if you call gsap.timeline().tweenTo() multiple times such that you create multiple tweens that are running simultaneously, you could create a situation where the overlap causes mis-timed rendering if an earlier-created one finishes later. The overwrite is set to "auto" now to avoid that (very rare) scenario. See https://greensock.com/forums/topic/25292-on-click-tweento-label-cancel-current-tween/?tab=comments#comment-122340
3.5.0 - NEW: ScrollTrigger.clearMatchMedia() clears out matchMedia() breakpoints that were previously set via ScrollTrigger.matchMedia(). It doesn't kill the ScrollTriggers or animations themselves - it just no longer triggers anything at that break point. - NEW: gsap.ticker.deltaRatio() method gives a ratio of the change since the last tick based on a target fps (defaults to 60fps). For example, if the ticker is running at EXACTLY 60fps, that means each tick would be roughly 16.67 milliseconds apart, thus the default .deltaRatio() would be 1 (though that rarely happens perfectly). If you call gsap.ticker.deltaRatio(120) meaning you want the ratio based on 120fps, it would return 2 in this scenario. If 33ms elapsed since the previous tick, gsap.ticker.deltaRatio(60) would return roughly 2 because the delta is about TWICE what a normal 60fps rate would be. This makes it easy to do things like gsap.ticker.add(() => obj.rotation += 1 * gsap.ticker.deltaRatio()) and have it animate at the same rate no matter what the refresh rate of the browser/ticker is. - NEW: you can set pinType: "fixed" in order to force ScrollTrigger to use position: fixed while pinning an element (which it normally does only if the scroller is the body/documentElement). - NEW: added support for animating Typed Arrays via EndArrayPlugin (which is in the GSAP core). See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray - IMPROVED: when setting a scrollTrigger on a gsap.timeline(), it had to wait for 1 tick before refreshing (because timelines are empty initially and only have a duration after being populated) but now you can manually call refresh() after populating the timeline so that it doesn't need to wait for that tick. This can help in some edge cases like the one here https://greensock.com/forums/topic/24973-issues-with-reinitializing-scrolltrigger/ - IMPROVED: better performance for creating a timeline with hundreds/thousands of tweens, particularly when most don't extend the overall duration. - IMPROVED: you can alter the duration of a tween inside of an onRepeat and as long as its parent timeline's smoothChildTiming property is set to true, it'll smoothly update. See https://greensock.com/forums/topic/24721-struggling-with-random-duration/?tab=comments#comment-120427 - IMPROVED: complex string-based eases that include parameters can now parse spaces without breaking, and even one set of nested parenthesis like "expoScale(25, 1, back.out(0.5))". See https://greensock.com/forums/topic/25008-delay-before-text-zooming-in - IMPROVED: ScrollTrigger's pinSpacing is disabled by default the pinned element's parent has display: flex, but now you can force pinSpacing with pinSpacing: true in that case. - FIXED: defining a value like "random([100, 20, -100])" for a tween, where there's an Array-based value in the string, didn't work properly. This was only the case for the string-based version - you could still use gsap.utils.random(), but now the string-based version works. See https://greensock.com/forums/topic/24901-using-gsaps-new-random-feature/ - FIXED: if you try animating to a CSS property that's undefined, like gsap.to(... {x: undefined}), it will be ignored now. See https://greensock.com/forums/topic/24905-undefined-in-params-breaks-animation-regression-between-311-and-320/ - FIXED: ScrollToPlugin factored in any offsetY or offsetX AFTER the max scroll position rather than before it, thus the viewport wasn't large enough to accommodate the initial scrollTo (without the offset), it would calculate the maximum and THEN subtract the offset, leading to an odd result. See greensock#402 - FIXED: if a ScrollTrigger has pinReparent: true, in certain cases it could alter the text color while pinned. See https://greensock.com/forums/topic/24908-scrolltrigger-pinreparent-styles/ - FIXED: a "fix" in 3.4.2 for working around collapsing margins was to automatically set overflow: hidden on the pinned element if there was no overflow (no scrolling), but in some rare cases that can have unintended consequences. Like in https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d the content becomes hidden while scrolling because of that "fix", so we rolled it back in 3.4.3 in favor of having people fix collapsing margins via their CSS setup instead. Setting overflow to hidden or auto is just one potential solution. A border-top: 1px solid transparent is another. But frankly collapsing margins don't seem to be a very common issue anyway. - FIXED: when a Draggable was applied to elements with position: fixed, their positioning could be rendered incorrectly if you altered the scroll while dragging. See https://greensock.com/forums/topic/24996-what-changed-from-version-32-to-make-this-not-work/ - FIXED: regression in 3.4.0 could cause a fromTo() tween not to render the starting state correctly if reversed quickly. See https://greensock.com/forums/topic/25014-scrolltrigger-scroll-issue-toggle-actions/ - FIXED: worked around an issue with the Web Components polyfill that caused Draggable not to work in IE11. See https://greensock.com/forums/topic/25000-draggable-stops-working-in-ie11-with-webcomponentsjs/ - FIXED: when a ScrollTrigger has once: true, its toggleClass should only toggle once (adding), so refreshing a page that's already scrolled down should result in the elements ABOVE that spot having the class toggled on, but it was toggling them off since those ScrollTriggers were technically past their "end". See https://greensock.com/forums/topic/25023-scrolltrigger-oncetrue-toggleclass-elements-above-are-not-triggered/ - FIXED: doing a motionPath animation on a generic object could result in errors. See greensock#370 - FIXED: a very rare edge case could cause a repeating animation to fire an onRepeat and/or do a repeatRefresh on the very last render (end). - FIXED: regression in 3.2.0 caused tweens that had reversed: true in their vars object not to render correctly. - FIXED: if a from() or fromTo() tween was inserted into the very beginning of a timeline that was reversed, the initial state may not render correctly. See https://greensock.com/forums/topic/25067-toggle-animation/ - FIXED: if you set up ScrollTriggers in one matchMedia() function that used a different orientation (vertical/horizontal) on the same scroller than in another (in other words, horizontal: true was set on one but not the other), the scroll position may not be updated properly on the subsequent call. See https://greensock.com/forums/topic/25071-scrolltrigger-horizontal-vs-vertical/ - FIXED: worked around a browser issue in Safari that could cause snapping in ScrollTrigger to be jerky in some cases, and/or it could get stuck (not land at the correct snapping spot). - FIXED: Physics2DPlugin and PhysicsPropsPlugin could render incorrect values if you used a "friction" value **and** a very long duration and reversed the animation after it was quite far along. - FIXED: Physics2DPlugin and PhysicsPropsPlugin could appear to visually pulse when using very low timeScale values. - FIXED: in a very rare circumstance, ScrollTrigger could throw an error. See https://greensock.com/forums/topic/25106-locomotivescroll-and-scrolltrigger-error-when-onleaveback-and-locoscrollscrollto/ - FIXED: a few TypeScript definitions, like greensock#406 - FIXED: if you set once: true on a ScrollTrigger and then refreshed a page after having already scrolled past the end of that ScrollTrigger, its associated animation may not play. See https://greensock.com/forums/topic/24436-scrolltrigger-how-to-start-animations-when-user-scrolls-from-bottom-to-top/
3.4.2 - FIXED: regression in 3.4.1 could cause pinning to break in certain scenarios. - FIXED: if you try pinning an element that has a child with collapsing margins, ScrollTrigger will now automatically sense if the pinned element has no scrollable content and set overflow: hidden as an inline style to prevent the collapsing margin issue. This should resolve most cases like that where collapsing margins cause a jump (by the amount of the collapse) when pinning. - FIXED: in the TypeScript definitions file, refreshPriority was accidentally set to be required instead of optional. See greensock#400
3.4.1 - NEW: ScrollTrigger.sort() method. You should generally create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right), but if that's not possible you can use ScrollTrigger.sort() to either use your own custom method for sorting or if none is provided, it'll sort by "refreshPriority" first, then by each ScrollTrigger's "start" value. So, for example, a ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too. - NEW: each media query function in the object passed to ScrollTrigger.matchMedia() can now [optionally] return a function which will be called when the media query becomes inactive, so it's a great place to put cleanup code. - IMPROVED: you can now make multiple calls to ScrollTrigger.matchMedia() with the same media query string(s). It's generally not useful/necessary, but in some component-based environments it can be quite handy. - IMPROVED: if you set once: true on a ScrollTrigger that has a scrub value, it will honor that and only scrub once to completion. - FIXED: the "float" CSS property of a ScrollTrigger-pinned element wasn't copied to the pin-spacer. - FIXED: added missing TypeScript definition for MotionPathPlugin.cacheRawPathMeasurements(). See greensock#396 - FIXED: a regression in ScrollTrigger's invalidateOnRefresh: true prevented it from working properly in some cases. See https://greensock.com/forums/topic/24765-multiple-scrolltriggers-in-multiple-each-functions-jquery/?tab=comments#comment-118817 - FIXED: if you disable() a ScrollTrigger that has a pinned element, its measurements may still inadvertently affect other ScrollTriggers that have the SAME pin element (very rare). - FIXED: if a ScrollTrigger was disabled, later when it gets re-enabled it may revert to the previous scroll position (not generally desirable). - FIXED: if you pin the same element multiple times, but at least one of those times it was NOT the "trigger", it could throw off the start/end calculations. See https://greensock.com/forums/topic/24811-pining-multiple-elements/ - FIXED: if there were multiple ScrollTriggers back-to-back that pin the same element, when you scroll backwards it may appear "stuck" in certain situations. - FIXED: under certain conditions, a paused animation that was scrubbed may act as though invalidate() kept getting called on it (basically it wouldn't init while paused). - FIXED: if you define a "render" function in a MorphSVGPlugin tween, it was interpreted as a function-based value (thus it would get called for each target and the RESULT of that function was used).
3.4.0 - NEW: ScrollTrigger.matchMedia() method that lets you easily set things up according to breakpoints and ScrollTrigger will automatically revert and kill any ScrollTriggers associated with the breakpoints that don't match. This makes it much simpler to make things behave differently on mobile devices and desktops, for example. - NEW: ScrollTrigger.scrollerProxy() method that makes it easier to integrate smooth scrolling effects by setting up proxy getter/setters for the scrollTop/scrollLeft properties of specific scrollers. - NEW: ScrollTrigger.saveStyles() method lets you record all the inline styles for any elements so that when ScrollTrigger does a refresh and reverts things internally (to do measurements), those elements have their inline styles fully reverted. This is particularly helpful when you have tweens/animatioons that add inline styles. Even if you rewind the tweens, that doesn't REMOVE inline styles, thus if you have CSS rules that should affect the elements, they won't because the inline ones (from the tweens) are more specific. - NEW: ScrollTrigger.config() recognizes a new "autoRefreshEvents" property that controls which events automatically trigger a ScrollTrigger.refresh(). It's a comma-delimited list with any of the following: "load,resize,visibilitychange,DOMContentLoaded" (and that's what it is by default). - NEW: globalTime() method on all animations lets you convert a local playhead time to the global time. For example, if a tween starts 5 seconds in and you run tween.globalTime(1) it would return 6 (assuming a timeScale of 1). It does factor in the timeScale of all ancestor timelines. - IMPROVED: you can revert fromTo() tweens to their previous state with a negative number like animation.progress(-1) or animation.totalTime(-1). - IMPROVED: if you kill() a ScrollTrigger, it will also revert any associated animation (and kill that too). - IMPROVED: if you change the duration of a tween after it has begun, it will make that change smoothly (adjust the startTime() unless the parent timeline has smoothChildTiming set to false). See https://greensock.com/forums/topic/24596-flicker-on-updating-duration-on-repeating-animation/ - IMPROVED: ScrollTrigger automatically sets scroll-behavior to "auto" if there's a "snap" defined because scroll-behavior: smooth would interfere with snapping. - IMPROVED: ScrollTrigger doesn't force a refresh() when returning to an inactive/hidden tab if the browser window wasn't resized. - FIXED: if anticipatePin was set on a ScrollTrigger, a refresh() (or window resize) could trigger it inadvertently. - FIXED: in certain circumstances with ScrollTrigger pins, the layout may not be properly refreshed when resizing. - FIXED: if you tween a generic object with a property that has a decimal value to a string with a decimal, it could cast it as a string instead of keeping it as a number. See https://greensock.com/forums/topic/24564-random-value-is-a-string/ - FIXED: if you kill() or disable() a ScrollTrigger that had a toggleClass, it may not reset things properly. - FIXED: worked around Firefox bug that affects borderColor (Firefox always reports the computed value s literally nothing, ""). See https://greensock.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/ - FIXED: worked around a bug in some browsers (like iOS Safari) where the browser would misreport the scroll position slightly, causing the snap of a ScrollTrigger to get halted (because it auto-killed the tween, thinking the user had interacted with the scroll). - FIXED: if you clearProps "transformOrigin", that inline style wasn't properly removed. See greensock#393 - FIXED: ScrollTrigger may refresh more than it really needed to. - FIXED: added Tween.set() to the TypeScript definitions. See greensock#392 - FIXED: if overwrite is set to "auto" and the playhead jumps way ahead past the end of an overlapping tween, it may not be overwritten. - FIXED: GSDevTools prevented overwrite: "auto" from functioning properly. Beware, however, that GSDevTools forces the global timeline to the end initially and then starts over so that all animations are initialized, thus overwriting occurs immediately. - FIXED: when you kill() a ScrollTrigger, it will also kill its marker elements now. - FIXED: if you alter the timeScale() of an animation that has a delay before it begins, it would appear to skip the delay. See https://greensock.com/forums/topic/24627-delay-ignored-when-timescale-set/ - FIXED: if a ScrollTrigger's pinned element was display: inline, it would collapse during the pinning. It's now switched to inline-block to maintain sizing. See https://greensock.com/forums/topic/24685-scrolltrigger-trouble-with-pinning/ - FIXED: if markers are enabled and there's one at the very bottom of the screen, viewport resizes may cause the marker to invert and its height would be incorporated into the page height.
3.3.4
- NEW: ScrollTrigger.config() method that lets you set a boolean "limitCallbacks" value like ScrollTrigger.config({ limitCallbacks: true }); Setting it to true causes ScrollTrigger to skip calling the onEnter/onLeave callbacks when the state isn't toggled, meaning if you scroll down past a ScrollTrigger on a page and then refresh the page, it won't call the "onEnter" unless it's actually in the viewport (well, between its start and end positions).
- FIXED: if you create a ScrollTrigger AFTER initial load and it doesn't have any animation associated with it, it wouldn't trigger a refresh(), thus it wouldn't fire its onEnter (for example) if it's already on screen. See https://greensock.com/forums/topic/24459-reveal-animation-in-react-gatsby/
- FIXED: if you create a pinned ScrollTrigger element and then scroll ALL the way down on the page, then switch tabs and come back (or do anything that'd trigger a refresh()), it may incorrectly pin that element again when it shouldn't. See https://greensock.com/forums/topic/24467-scrolltrigger-pin-feature-issue
- FIXED: regression in 3.3.0 could cause gsap.from() tweens to generate warnings in the console when immediateRender is set to false. See https://greensock.com/forums/topic/24519-warnings-in-console-while-using-gsapfrom-with-immediaterender-false/
- FIXED: the animation associated with a ScrollTrigger that does NOT have a scrub value may revert upon refresh() (which happens when the tab that was hidden becomes active again, so if you switch tabs and come back again, the animation could be reset). See https://greensock.com/forums/topic/24452-what-is-the-best-practice-of-tween-few-times-one-element-with-scrolltrigger/
- FIXED: if a page was loaded such that its scrollbar is already **past** a ScrollTrigger, that ScrollTrigger's onEnter wouldn't get triggered. Now there's a setting for that, ScrollTrigger.config({limitCallbacks: true}). This is handy because sometimes you don't want those callbacks to get triggered in that scenario. When ScrollTrigger originally launched it WOULD fire the onEnter regardless, but then we "fixed" that behavior so that it'd only fire when the scroll position is between the ScrollTrigger's start and end, but realized that wasn't entirely intuitive for everyone, so we switched the default behavior back to firing onEnter by default and allow you to disable that with ScrollTrigger.config({limitCallbacks: true});
- FIXED: if a ScrollTrigger was killed during the course of a refresh() (as could happen on initial load if you set once: true), it could cause some ScrollTriggers to skip their refresh() due to the index being shifted internally. See https://greensock.com/forums/topic/24412-scrolltriggerrefresh-help/
PreviousNext