Since 3.5.1 - Cannot read property 'pause' of undefined #415
Comments
|
Hey @matt3224 - would you be able to provide a minimal demo that shows that problem? Nobody else has reported something like that, and I'm curious to see it in context. I'm not saying there isn't a bug - I'm just saying it's tough to troubleshoot blind so a minimal demo would be greatly appreciated. |
|
Hey @jackdoyle I couldn't think of a way to create a minimal demo. I'm using Svelte/Sapper and pulling content from a CMS, this causes a possible delay in the dom being ready and i find that i have to manually fire .refresh in onMount, similarly i need to run refresh in onDestroy too. onDestroy is a method that runs in the server and the browser and when doing a cold load .refresh is running and failing presumably because it got no access to the dom. if i wrap it in a check then the errors disappears but my scrolltriggers no longer mount between pages. That is the gist of my issue, it's a little contrived but when using sapper it appears to be the only way to get things to work. Whatever changed between 3.5.0 and 3.5.1 throws the above error. I have made a reproduction in-case that helps (https://github.com/matt3224/sapper-gsap) but it's not a great replication as im not pulling in data and .refresh isnt needed because pages load too quickly |
|
Yeah, it's definitely not a good idea to call refresh() before the DOM is even available, but in the next release I added some conditional logic to at least avoid the error you ran into. You can preview it here (minified): https://assets.codepen.io/16327/ScrollTrigger.min.js If you need the raw source for your bundler, here's a .tgz file you can NPM install: https://assets.codepen.io/16327/gsap-beta.tgz Better? |
|
Great, thanks! I'll give it a test |
jackdoyle
added a commit
that referenced
this issue
Jan 12, 2021
- 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 #421 and #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 #415 - FIXED: if immediateRender was set to true on a timeline.tweenTo()/tweenFromTo(), it could throw an error. See #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.
|
Should be resolved in the latest release. |
|
I'm still receiving the error. |
|
@patrickdevelopes it sounds like you must be calling ScrollTrigger.refresh() BEFORE the window/document/body exists. I would definitely recommend against doing that. I'll add some code to the next release to sense that condition and skip the refresh() call in that case. |
jackdoyle
added a commit
that referenced
this issue
Sep 29, 2021
- 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
jackdoyle
added a commit
that referenced
this issue
Sep 29, 2021
- 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since updating from 3.5.0 to 3.5.1 this error has appeared. I have downgraded to 3.5.0 for the time being
The text was updated successfully, but these errors were encountered: