Tags · insad/GSAP

- 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/

Aug 13, 2020
719be8d
zip
tar.gz

3.4.2

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

Jul 21, 2020
8b6107a
zip
tar.gz

3.4.1

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).

Jul 19, 2020
73a92fa
zip
tar.gz

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.

Jul 8, 2020
c7e6623
zip
tar.gz

3.3.4

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/

Jun 20, 2020
ff8ed36
zip
tar.gz

3.3.3

3.3.3

- FIXED:  if you scroll really fast so that it goes past the start and end of the ScrollTrigger (onEnter and onLeave), it should prioritize the latter BUT if the onLeave is "none" or undefined, it makes the most intuitive sense to fire the onEnter action in this case. Likewise, if you scroll backward very quickly, it should do the same for the onEnterBack/onLeaveBack actions. See https://greensock.com/forums/topic/24445-scrolltrigger-version-332-doesnt-work-in-my-example/

- FIXED: (related to above) if you have an onEnter and scroll quickly past BOTH of a ScrollTrigger's start/end positions (could happen especially if they're very close to each other), the onEnter may not fire at all.

- FIXED: if you reload a page that's already scrolled down, the onEnter/onLeave may fire even for ScrollTriggers that are "above" where the scroll position is. Now it more appropriately skips ones that aren't relevant.

Jun 14, 2020
754ca43
zip
tar.gz

3.3.2

3.3.2

- NEW: ScrollTrigger accommodates pinning the same element multiple times! Just make sure you create the ScrollTriggers in the order they'll be pinned. See https://greensock.com/forums/topic/24429-scrolltrigger-pinning-element-both-top-and-bottom and https://greensock.com/forums/topic/24421-issues-with-multiple-pins-in-a-row/

- IMPROVED: if a pinned ScrollTrigger's animation affects the pin element's transform, it now gets factored in to the final positioning of that pin.

- IMPROVED: if you set up a toggleClass on a ScrollTrigger that has once: true, it will no longer toggle that class back onLeave (it will only happen onEnter because that's more intuitive).

- FIXED: if you kill() a ScrollTrigger when it's in the middle of scrubbing or snapping, it wouldn't kill the in-progress scrubbing or snapping.

- FIXED: if a tween with a stagger is overwritten, the staggered (nested) tweens that haven't started yet may render for one tick when they're scheduled to start

- FIXED: a zero-duration tween (a set()) at the very beginning of a timeline may not render correctly in certain circumstances. See https://greensock.com/forums/topic/24358-scrolltrigger-set/

- FIXED: regression in 3.3.0 could cause initial transform-related values not to be parsed correctly if an ancestor element had dispaly: none. See greensock#388 (this reverts the change made for greensock#375)

- FIXED: the pre-"from" values in a fromTo() may not render when the parent timeline's playhead rewinds past the beginning of that tween.

- FIXED: gsap.utils.wrapYoyo() would return NaN if the start and end values matched. See https://greensock.com/forums/topic/24403-wrapyoyo00x-nan/

- FIXED: if you defined a toggleClass on a ScrollTrigger and that class affected positioning, a refresh() could miscalculate positions because the class wasn't removed for the measurements. See https://greensock.com/forums/topic/24412-scrolltriggerrefresh-help/

Jun 14, 2020
0a0a089
zip
tar.gz

3.3.1

3.3.1

- NEW: ScrollTrigger.batch() method that eliminates the need for something like IntersectionObserver in cases where you want to stagger the animations of elements as they enter the viewport.

- NEW: ScrollTrigger now recognizes an onRefreshInit callback which can be useful in advanced situations where you want to reset positioning of elements just for the calculation of the start/end. If you return a gsap.set() call (or any GSAP animation, but it really only makes sense to do a gsap.set()), it'll actaully revert it automatically when the refresh finishes!

- NEW: Any "refreshInit" listener can [optionally] return a gsap.set() call that'll get reverted as soon as the refresh finishes. Super useful for resetting positions just for the refresh() measurements.

- IMPROVED: ScrollTrigger is now compatible with Internet Explorer and it no longer relies on the "name" being implicity defined. This also fixes some problems that occured in bundlers. See greensock#385 (comment)

- FIXED: if you refresh a page after scrolling down, ScrollTrigger may call the onEnter for everything ABOVE that position (including triggers that are off-screen). Now it only fires the onEnter for triggers that are truly inbetween their start and end positions.

- FIXED: here were a few TypeScript definition file problems. See greensock#383 and greensock#338

- FIXED: Various problems with ScrollTrigger not updating or refreshing properly in certain edge cases.

- FIXED: in some rare cases, an error could be thrown by Draggable or MotionPathPlugin if you tried animating/dragging an element with an ancestor element that has been interacted with by GSAP but NOT related to transforms. See https://greensock.com/forums/topic/24318-nuxtjs-draggable-error-cacherendertransform-is-not-a-function/

- FIXED: if a nested tween gets overwritten INSIDE a stagger tween, it now adjusts the duration of that parent tween when appropriate. For example, if the last staggered tween gets killed, it should shorten the duration of the parent tween.

Jun 5, 2020
d393bde
zip
tar.gz

PreviousNext

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3.6.0

3.5.1

3.5.0