fix: prevent jitter animation on pinch to zoom and on scroll event

src/components/App.tsx

@@ -2008,6 +2008,31 @@ class App extends React.Component<AppProps, AppState> {
         this.files,
       );
     }
+
+    if (
+      this.state.scrollConstraints &&
+      this.state.scrollConstraints.isAnimating
+    ) {
+      const { shouldAnimate, animateTo } = constrainScrollState(this.state);
+
+      scrollConstraintsAnimationTimeout = setTimeout(() => {
+        this.cancelInProgresAnimation?.();
+        if (shouldAnimate && animateTo) {
+          const fromValues = {
+            scrollX: this.state.scrollX,
+            scrollY: this.state.scrollY,
+            zoom: this.state.zoom.value,
+          };
+          const toValues = {
+            scrollX: animateTo.scrollX,
+            scrollY: animateTo.scrollY,
+            zoom: animateTo.zoom.value,
+          };
+
+          this.animateToConstrainedArea(fromValues, toValues);
+        }
+      }, 200);
+    }
   }
 
   private renderInteractiveSceneCallback = ({
@@ -2683,25 +2708,14 @@ class App extends React.Component<AppProps, AppState> {
       }),
     };
 
-    const { state, shouldAnimate, animateTo } = constrainScrollState(newState);
+    const { state, shouldAnimate } = constrainScrollState(newState);
 
-    this.setState(state, () => {
+    this.setState({
-      if (shouldAnimate && animateTo) {
+      ...state,
-        scrollConstraintsAnimationTimeout = setTimeout(() => {
+      scrollConstraints: {
-          const fromValues = {
+        ...state.scrollConstraints!,
-            scrollX: newState.scrollX,
+        isAnimating: shouldAnimate,
-            scrollY: newState.scrollY,
+      },
-            zoom: newState.zoom.value,
-          };
-          const toValues = {
-            scrollX: animateTo.scrollX,
-            scrollY: animateTo.scrollY,
-            zoom: animateTo.zoom.value,
-          };
-
-          this.animateToConstrainedArea(fromValues, toValues);
-        }, 200);
-      }
     });
   };
 
@@ -2724,13 +2738,16 @@ class App extends React.Component<AppProps, AppState> {
       toValues,
       duration: 200,
       onStart: () => {
-        this.setState((state) => ({
+        this.setState((state) => {
-          shouldCacheIgnoreZoom: true,
+          cancelRender();
-          scrollConstraints: {
+          return {
-            ...state.scrollConstraints!,
+            shouldCacheIgnoreZoom: true,
-            isAnimating: true,
+            scrollConstraints: {
-          },
+              ...state.scrollConstraints!,
-        }));
+              isAnimating: false,
+            },
+          };
+        });
       },
       onEnd: cleanUp,
       onCancel: cleanUp,

src/scene/scrollConstraints.ts

@@ -330,7 +330,7 @@ export const constrainScrollState = (
     zoom: AppState["zoom"];
   } | null;
 } => {
-  if (!state.scrollConstraints || state.scrollConstraints.isAnimating) {
+  if (!state.scrollConstraints) {
     return { state, shouldAnimate: false, animateTo: null };
   }
   const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;