From e01fd4a933aa852e97ccfbee15378d8479e2b49f Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Thu, 22 Aug 2024 11:21:33 +0200
Subject: [PATCH] Prevent retriggering a scrollTo animation (and warning) when
 the current scrollLeft/scrollTop is a float

---
 .changeset/clever-hats-sort.md                |  5 +++++
 packages/framer-scroller/hooks/useScrollTo.ts | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/clever-hats-sort.md

diff --git a/.changeset/clever-hats-sort.md b/.changeset/clever-hats-sort.md
new file mode 100644
index 0000000000..9c43f6fd60
--- /dev/null
+++ 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
index 9b207a2721..08346c6c9b 100644
--- 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'