Prevent retriggering a scrollTo animation (and warning) when the curr…

…ent scrollLeft/scrollTop is a float
graphcommerce-org · Aug 22, 2024 · e01fd4a · e01fd4a
1 parent 7085b4a
commit e01fd4a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/.changeset/clever-hats-sort.md b/.changeset/clever-hats-sort.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/framer-scroller': patch
+---
+
+Prevent retriggering a scrollTo animation when the current scrollLeft/scrollTop is a float
diff --git a/packages/framer-scroller/hooks/useScrollTo.ts b/packages/framer-scroller/hooks/useScrollTo.ts
@@ -33,7 +33,12 @@ export function useScrollTo() {
         to = incoming
       }
 
-      if (process.env.NODE_ENV === 'development' && scroll.animating.get() && __retrigger === 0) {
+      if (
+        process.env.NODE_ENV === 'development' &&
+        scroll.animating.get() &&
+        __retrigger === 0 &&
+        (Math.round(ref.scrollLeft) !== to.x || Math.round(ref.scrollTop) !== to.y)
+      ) {
         console.warn(
           `scrollTo triggered while another animation is in progress. This cancels the current animation and creates a new one.`,
         )
@@ -55,7 +60,7 @@ export function useScrollTo() {
       const stop: { stop: () => void }[] = []
 
       const xDone = new Promise<void>((onComplete) => {
-        if (ref.scrollLeft !== to.x) {
+        if (Math.round(ref.scrollLeft) !== to.x) {
           disableSnap(stopAnimationOnScroll)
           if (!stopAnimationOnScroll) ref.style.overflow = 'hidden'
 
@@ -77,7 +82,7 @@ export function useScrollTo() {
       })
 
       const yDone = new Promise<void>((onComplete) => {
-        if (ref.scrollTop !== to.y) {
+        if (Math.round(ref.scrollTop) !== to.y) {
           disableSnap(stopAnimationOnScroll)
           if (!stopAnimationOnScroll) ref.style.overflow = 'hidden'