@graphcommerce/framer-scroller 1.1.10 → 1.1.14

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

@@ -1,6 +1,6 @@
 import { useElementScroll } from '@graphcommerce/framer-utils'
 import { Point } from 'framer-motion'
-import { animate } from 'popmotion'
+import { animate, easeOut } from 'popmotion'
 import { useScrollerContext } from './useScrollerContext'
 
 export function useScrollTo() {
@@ -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'
@@ -20,6 +20,7 @@ import { useVelocitySnapTo } from './useVelocitySnapTo'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
+      willChange: 'scroll-position',
       '& *': {
         userSelect: 'none',
         userDrag: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "1.1.10",
+  "version": "1.1.14",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,17 +16,17 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.19",
-    "@graphcommerce/image": "^2.105.8",
-    "@graphcommerce/next-ui": "^3.21.0",
+    "@graphcommerce/framer-utils": "^2.103.20",
+    "@graphcommerce/image": "^2.105.10",
+    "@graphcommerce/next-ui": "^3.21.4",
     "@material-ui/core": "^4.12.3",
     "popmotion": "11.0.3"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.8",
-    "@graphcommerce/prettier-config-pwa": "^3.0.4",
-    "@graphcommerce/typescript-config-pwa": "^3.1.1",
+    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
+    "@graphcommerce/eslint-config-pwa": "^3.1.9",
+    "@graphcommerce/prettier-config-pwa": "^3.0.5",
+    "@graphcommerce/typescript-config-pwa": "^3.1.2",
     "@playwright/test": "^1.17.1"
   },
   "peerDependencies": {
@@ -36,5 +36,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.8.0"
   },
-  "gitHead": "f18eba6b141623d926f5ae3a6efc1409d3bd365c"
+  "gitHead": "cac49a2bf6cdcbb6131dc7b64172e90aad257c6d"
 }