@graphcommerce/framer-scroller 2.1.11 → 2.1.12

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 2.1.12
+
+### Patch Changes
+
+- [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`55c2dcde7`](https://github.com/graphcommerce-org/graphcommerce/commit/55c2dcde7869ee51b84494af653b3edfd43904a4) Thanks [@paales](https://github.com/paales)! - ScrollerButton prev/next button wouldn't render at the right time
+
+* [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494) Thanks [@paales](https://github.com/paales)! - LayoutOverlay performance improvements
+
+* Updated dependencies [[`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/next-ui@4.8.1
+  - @graphcommerce/framer-utils@3.1.3
+  - @graphcommerce/image@3.1.6
+
 ## 2.1.11
 
 ### Patch Changes

package/components/ScrollerButton.tsx

@@ -18,14 +18,25 @@ export const ScrollerButton = m(
     const scrollTo = useScrollTo()
     const handleClick = () => scrollTo(getSnapPosition(direction))
 
-    const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef, 1)
+    const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef)
 
     const progress = useTransform<number, number>(
       [xProgress, yProgress, xMax, yMax],
       ([x, y, xM, yM]) => {
         if (xM === 0 && yM === 0) return 0
-        if (direction === 'right' || direction === 'down') return x * y === 1 ? 0 : 1
-        return x * y === 0 ? 0 : 1
+
+        switch (direction) {
+          case 'left':
+            return x < 0.1 ? 0 : 1
+          case 'right':
+            return x > 0.9 ? 0 : 1
+          case 'up':
+            return y < 0.1 ? 0 : 1
+          case 'down':
+            return y > 0.9 ? 0 : 1
+          default:
+            return 0
+        }
       },
     )
     const scale = useSpring(progress)

package/hooks/useScrollTo.ts

@@ -13,7 +13,7 @@ export function useScrollTo() {
       const ref = scrollerRef.current
       if (!ref) return
 
-      // In the future we want to move to browser native scrolling behavior, but since it is too slow we're not moving to that yet.
+      // In the future we want to move to browser native scrolling behavior, but since the animation timing isn't configurable we can't use it.
       // if ('scrollBehavior' in document.documentElement.style) {
       //   scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
       //   await new Promise((onComplete) => {
@@ -22,6 +22,9 @@ export function useScrollTo() {
       //   return
       // }
 
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scroll.scroll.start(() => () => {})
+
       const xDone = new Promise<void>((onComplete) => {
         if (ref.scrollLeft !== to.x) {
           disableSnap()
@@ -32,10 +35,11 @@ export function useScrollTo() {
               velocity: scroll.x.getVelocity(),
               onUpdate: (v) => {
                 ref.scrollLeft = v
+                scroll.scroll.set({ ...scroll.scroll.get(), x: v })
               },
               onComplete,
               onStop: onComplete,
-              duration: 500,
+              duration: 375,
             }),
           )
         } else onComplete()
@@ -49,22 +53,26 @@ export function useScrollTo() {
               from: ref.scrollTop,
               to: to.y,
               velocity: scroll.y.getVelocity(),
-              onUpdate: (v) => {
+              onUpdate: (v: number) => {
                 ref.scrollTop = v
+                scroll.scroll.set({ ...scroll.scroll.get(), y: v })
               },
               onComplete,
               onStop: onComplete,
-              duration: 500,
+              duration: 375,
             }),
           )
-        } else onComplete()
+        } else {
+          onComplete()
+        }
       })
 
       await xDone
       await yDone
+      scroll.scroll.stop()
       enableSnap()
     },
-    [disableSnap, enableSnap, register, scroll.x, scroll.y, scrollerRef],
+    [disableSnap, enableSnap, register, scroll, scrollerRef],
   )
 
   return scrollTo

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.2",
-    "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/next-ui": "4.8.0"
+    "@graphcommerce/framer-utils": "3.1.3",
+    "@graphcommerce/image": "3.1.6",
+    "@graphcommerce/next-ui": "4.8.1"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.7",