From 67260915cb4a40157f881f7314e707d6705594ef Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 12 May 2025 19:09:21 +1000
Subject: [PATCH] improve zoom in/out animation

---
 packages/excalidraw/components/App.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 4cd9a8688..f8ff25d3b 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -3929,8 +3929,26 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private debounceConstrainScrollState = debounce((state: AppState) => {
-    this.setState(constrainScrollState(state, "rigid"));
-  }, 500);
+    const newState = constrainScrollState(state, "rigid");
+
+    const fromValues = {
+      scrollX: this.state.scrollX,
+      scrollY: this.state.scrollY,
+      zoom: this.state.zoom.value,
+    };
+    const toValues = {
+      scrollX: newState.scrollX,
+      scrollY: newState.scrollY,
+      zoom: newState.zoom.value,
+    };
+
+    if (areCanvasTranslatesClose(fromValues, toValues)) {
+      return;
+    }
+
+    this.cancelInProgressAnimation?.();
+    this.animateToConstrainedArea(fromValues, toValues);
+  }, 300);
 
   private animateToConstrainedArea = (
     fromValues: AnimateTranslateCanvasValues,