@graphcommerce/framer-scroller 1.1.13 → 1.1.17

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.16...@graphcommerce/framer-scroller@1.1.17) (2021-12-21)
+
+
+### Bug Fixes
+
+* **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
+
+
+
+
+
+## [1.1.14](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.13...@graphcommerce/framer-scroller@1.1.14) (2021-12-20)
+
+
+### Bug Fixes
+
+* **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
+
+
+
+
+
 ## [1.1.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.9...@graphcommerce/framer-scroller@1.1.10) (2021-12-17)
 
 

package/hooks/useScrollTo.ts

@@ -11,6 +11,11 @@ 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.
+    // if ('scrollBehavior' in document.documentElement.style) {
+    //   scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
+    // }
+
     const xDone = new Promise<void>((onComplete) => {
       if (ref.scrollLeft !== to.x) {
         disableSnap()
@@ -24,7 +29,6 @@ export function useScrollTo() {
             },
             onComplete,
             onStop: onComplete,
-            bounce: 50,
           }),
         )
       } else onComplete()
@@ -43,7 +47,7 @@ export function useScrollTo() {
             },
             onComplete,
             onStop: onComplete,
-            bounce: 50,
+            duration: 500,
           }),
         )
       } else onComplete()

package/hooks/useScroller.ts

@@ -11,7 +11,7 @@ import {
   useTransform,
 } from 'framer-motion'
 import React, { ReactHTML, useState } from 'react'
-import { ScrollSnapProps, ScrollSnapType } from '../types'
+import { ScrollSnapProps } from '../types'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
 import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
@@ -25,7 +25,6 @@ const useStyles = makeStyles(
         userDrag: 'none',
       },
     },
-
     rootSmSnapDirNone: {
       [theme.breakpoints.down('sm')]: {
         overflow: 'hidden',
@@ -105,6 +104,9 @@ const useStyles = makeStyles(
         scrollSnapType: scrollSnapTypeMd,
       },
     }),
+    rootNoSnap: {
+      willChange: 'scroll-position',
+    },
     rootIsPanning: {
       cursor: 'grabbing !important',
       '& > *': {
@@ -216,6 +218,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
     mdSnapDir,
     mdGridDir,
     isSnap,
+    noSnap: !isSnap,
     isPanning,
     hideScrollbar,
     canGrab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "1.1.13",
+  "version": "1.1.17",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@graphcommerce/framer-utils": "^2.103.20",
-    "@graphcommerce/image": "^2.105.10",
-    "@graphcommerce/next-ui": "^3.21.3",
+    "@graphcommerce/image": "^2.105.11",
+    "@graphcommerce/next-ui": "^3.21.7",
     "@material-ui/core": "^4.12.3",
     "popmotion": "11.0.3"
   },
@@ -36,5 +36,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.8.0"
   },
-  "gitHead": "7cfbdb5a042e271252c8b9729393e084002a321e"
+  "gitHead": "09aca3fbe0a5dc006b33fc8dee349c81bcbe0cb8"
 }