diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
index 4488516e08bde..403743d107c3e 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
@@ -609,7 +609,7 @@ export class CanvasView {
     /**
      * Zooms to fit the entire graph on the canvas.
      */
-    public fit(): void {
+    public fit(allowTransition: boolean): void {
         const translate = [this.x, this.y];
         const scale: number = this.k;
         let newScale: number;
@@ -638,11 +638,11 @@ export class CanvasView {
             newScale = 1;
 
             // since the entire graph will fit on the canvas, offset origin appropriately
-            graphLeft -= 100;
-            graphTop -= 50;
+            graphLeft -= 313;
+            graphTop -= 25;
         }
 
-        this.allowTransition = true;
+        this.allowTransition = allowTransition;
         this.centerBoundingBox({
             x: graphLeft - translate[0] / scale,
             y: graphTop - translate[1] / scale,
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts
index d211ad5f94385..d8c851310d690 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts
@@ -33,6 +33,6 @@ export const zoomIn = createAction('[Transform] Zoom In');
 
 export const zoomOut = createAction('[Transform] Zoom Out');
 
-export const zoomFit = createAction('[Transform] Zoom Fit');
+export const zoomFit = createAction('[Transform] Zoom Fit', props<{ transition: boolean }>());
 
 export const zoomActual = createAction('[Transform] Zoom Actual');
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts
index 675e47477c95c..e887aa579f886 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts
@@ -84,7 +84,11 @@ export class TransformEffects {
                             if (isFinite(item.scale) && isFinite(item.translateX) && isFinite(item.translateY)) {
                                 // restore previous view
                                 this.canvasView.transform([item.translateX, item.translateY], item.scale);
+                            } else {
+                                this.store.dispatch(TransformActions.zoomFit({ transition: false }));
                             }
+                        } else {
+                            this.store.dispatch(TransformActions.zoomFit({ transition: false }));
                         }
                     } catch (e) {
                         // likely could not parse item... ignoring
@@ -143,8 +147,9 @@ export class TransformEffects {
         () =>
             this.actions$.pipe(
                 ofType(TransformActions.zoomFit),
-                tap(() => {
-                    this.canvasView.fit();
+                map((action) => action.transition),
+                tap((transition) => {
+                    this.canvasView.fit(transition);
                 })
             ),
         { dispatch: false }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
index e8013e6cf35c8..191824bd82490 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
@@ -83,7 +83,7 @@ export class NavigationControl {
     }
 
     zoomFit(): void {
-        this.store.dispatch(zoomFit());
+        this.store.dispatch(zoomFit({ transition: true }));
     }
 
     zoomActual(): void {