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((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((onComplete) => { - if (ref.scrollTop !== to.y) { + if (Math.round(ref.scrollTop) !== to.y) { disableSnap(stopAnimationOnScroll) if (!stopAnimationOnScroll) ref.style.overflow = 'hidden'