@graphcommerce/framer-scroller 6.0.2-canary.8 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Change Log
 
+## 6.1.0
+
+### Patch Changes
+
+- [`b8bd4abcd`](https://github.com/graphcommerce-org/graphcommerce/commit/b8bd4abcdfb9fc96ec5a724b449df713b99af23b) - Do not change the behavior of the useScrollTo, only warn about possible problems. ([@paales](https://github.com/paales))
+
+- [#1895](https://github.com/graphcommerce-org/graphcommerce/pull/1895) [`e6dbddc01`](https://github.com/graphcommerce-org/graphcommerce/commit/e6dbddc019358f13886288ae065da2def0c1b335) - `useScrollTo` improvements for easier debugging:
+
+  - When a `scrollTo` animation is requesed while an animation is is progress it will throw an error
+  - When a `scrollTo` animation is retriggered more than 5 times, it will throw an error
+  - When a `scrollTo` detects the overlay is resized after the animation it will show a warning. ([@paales](https://github.com/paales))
+
+- [#1901](https://github.com/graphcommerce-org/graphcommerce/pull/1901) [`54aadf39f`](https://github.com/graphcommerce-org/graphcommerce/commit/54aadf39fa9cf2d84c7feab8bc07703e3d02741d) - Make sure the stop function is stopping both x and y animations to prevent rare occasions where a direction isn’t cancelled ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.22
+
+## 6.0.2-canary.21
+
+## 6.0.2-canary.20
+
+### Patch Changes
+
+- [#1901](https://github.com/graphcommerce-org/graphcommerce/pull/1901) [`54aadf39f`](https://github.com/graphcommerce-org/graphcommerce/commit/54aadf39fa9cf2d84c7feab8bc07703e3d02741d) - Make sure the stop function is stopping both x and y animations to prevent rare occasions where a direction isn’t cancelled ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.19
+
+### Patch Changes
+
+- [`b8bd4abcd`](https://github.com/graphcommerce-org/graphcommerce/commit/b8bd4abcdfb9fc96ec5a724b449df713b99af23b) - Do not change the behavior of the useScrollTo, only warn about possible problems. ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.18
+
+## 6.0.2-canary.17
+
+### Patch Changes
+
+- [#1895](https://github.com/graphcommerce-org/graphcommerce/pull/1895) [`e6dbddc01`](https://github.com/graphcommerce-org/graphcommerce/commit/e6dbddc019358f13886288ae065da2def0c1b335) - `useScrollTo` improvements for easier debugging:
+
+  - When a `scrollTo` animation is requesed while an animation is is progress it will throw an error
+  - When a `scrollTo` animation is retriggered more than 5 times, it will throw an error
+  - When a `scrollTo` detects the overlay is resized after the animation it will show a warning. ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.16
+
+## 6.0.2-canary.15
+
+## 6.0.2-canary.14
+
+## 6.0.2-canary.13
+
+## 6.0.2-canary.12
+
+## 6.0.2-canary.11
+
+## 6.0.2-canary.10
+
+## 6.0.2-canary.9
+
 ## 6.0.2-canary.8
 
 ## 6.0.2-canary.7

package/hooks/useScrollTo.ts

@@ -11,7 +11,7 @@ export function useScrollTo() {
   const duration = (useContext(MotionConfigContext).transition as Tween | undefined)?.duration ?? 0
 
   const scrollTo = useCallback(
-    async (incoming: Point | [number, number]) => {
+    async (incoming: Point | [number, number], retrigger = 0) => {
       const ref = scrollerRef.current
       if (!ref) return
 
@@ -24,10 +24,32 @@ export function useScrollTo() {
         to = incoming
       }
 
+      if (process.env.NODE_ENV === 'development' && scroll.animating.get() && retrigger === 0) {
+        console.warn(
+          `scrollTo triggered while another animation is in progress. This cancels the current animation and creates a new one.`,
+        )
+      }
+
+      if (process.env.NODE_ENV === 'development' && retrigger > 5) {
+        console.error(
+          `scrollTo triggered more than 5 times, is the element resizing constantly? Bailing out.`,
+        )
+        return
+      }
+
+      if (process.env.NODE_ENV === 'development' && retrigger > 0) {
+        console.warn(
+          `scrollTo re-animating to because the final location changed during animation.`,
+        )
+      }
+
+      const stop: { stop: () => void }[] = []
+
       const xDone = new Promise<void>((onComplete) => {
         if (ref.scrollLeft !== to.x) {
           disableSnap()
-          register(
+
+          stop.push(
             animate({
               from: ref.scrollLeft,
               to: to.x,
@@ -47,7 +69,7 @@ export function useScrollTo() {
       const yDone = new Promise<void>((onComplete) => {
         if (ref.scrollTop !== to.y) {
           disableSnap()
-          register(
+          stop.push(
             animate({
               from: ref.scrollTop,
               to: to.y,
@@ -67,13 +89,13 @@ export function useScrollTo() {
         }
       })
 
-      await xDone
-      await yDone
+      register({ stop: () => stop.forEach((s) => s.stop()) })
+      await Promise.all([xDone, yDone])
 
       if (Array.isArray(incoming)) {
         const checkPositions = getScrollSnapPositions()
         if (checkPositions.x[incoming[0]] !== to.x || checkPositions.y[incoming[1]] !== to.y)
-          await scrollTo(incoming)
+          await scrollTo(incoming, retrigger + 1)
       }
       enableSnap()
     },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.2-canary.8",
+  "version": "6.1.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "popmotion": "11.0.5",
-    "@graphcommerce/framer-utils": "6.0.2-canary.8",
-    "@graphcommerce/image": "6.0.2-canary.8"
+    "@graphcommerce/framer-utils": "6.1.0",
+    "@graphcommerce/image": "6.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.8",
-    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.8",
-    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.8"
+    "@graphcommerce/eslint-config-pwa": "6.1.0",
+    "@graphcommerce/prettier-config-pwa": "6.1.0",
+    "@graphcommerce/typescript-config-pwa": "6.1.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.16",