diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js
index 0b2b8d3c137ffa..7bde3fbe9ee898 100644
--- a/packages/block-editor/src/components/iframe/use-scale-canvas.js
+++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js
@@ -156,8 +156,6 @@ export function useScaleCanvas( {
 	const isZoomedOut = scale !== 1;
 	const prefersReducedMotion = useReducedMotion();
 	const isAutoScaled = scale === 'auto-scaled';
-	// Track if the animation should start when the useEffect runs.
-	const startAnimationRef = useRef( false );
 	// Track the animation so we know if we have an animation running,
 	// and can cancel it, reverse it, call a finish event, etc.
 	const animationRef = useRef( null );
@@ -250,7 +248,6 @@ export function useScaleCanvas( {
 	 * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.
 	 */
 	const finishZoomOutAnimation = useCallback( () => {
-		startAnimationRef.current = false;
 		animationRef.current = null;
 
 		// Add our final scale and frame size now that the animation is done.
@@ -285,40 +282,15 @@ export function useScaleCanvas( {
 
 	const previousIsZoomedOut = useRef( false );
 
-	/**
-	 * Runs when zoom out mode is toggled, and sets the startAnimation flag
-	 * so the animation will start when the next useEffect runs. We _only_
-	 * want to animate when the zoom out mode is toggled, not when the scale
-	 * changes due to the container resizing.
-	 */
-	useEffect( () => {
-		const trigger =
-			iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
-
-		previousIsZoomedOut.current = isZoomedOut;
-
-		if ( ! trigger ) {
-			return;
-		}
-
-		startAnimationRef.current = true;
-
-		if ( ! isZoomedOut ) {
-			return;
-		}
-
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
-		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-		};
-	}, [ iframeDocument, isZoomedOut ] );
-
 	/**
 	 * This handles:
 	 * 1. Setting the correct scale and vars of the canvas when zoomed out
 	 * 2. If zoom out mode has been toggled, runs the animation of zooming in/out
 	 */
 	useEffect( () => {
+		const startAnimation = previousIsZoomedOut.current !== isZoomedOut;
+		previousIsZoomedOut.current = isZoomedOut;
+
 		if ( ! iframeDocument ) {
 			return;
 		}
@@ -336,12 +308,12 @@ export function useScaleCanvas( {
 			} );
 		}
 
-		if ( scaleValue < 1 ) {
+		if ( isZoomedOut ) {
 			// If we are not going to animate the transition, set the scale and frame size directly.
 			// If we are animating, these values will be set when the animation is finished.
 			// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
 			// animate the transition.
-			if ( ! startAnimationRef.current ) {
+			if ( ! startAnimation ) {
 				iframeDocument.documentElement.style.setProperty(
 					'--wp-block-editor-iframe-zoom-out-scale',
 					scaleValue
@@ -352,6 +324,8 @@ export function useScaleCanvas( {
 				);
 			}
 
+			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+
 			iframeDocument.documentElement.style.setProperty(
 				'--wp-block-editor-iframe-zoom-out-content-height',
 				`${ contentHeight }px`
@@ -383,10 +357,7 @@ export function useScaleCanvas( {
 		 * - After the animation is complete, remove the fixed positioning
 		 *   and set the scroll position that keeps everything centered.
 		 */
-		if ( startAnimationRef.current ) {
-			// Don't allow a new transition to start again unless it was started by the zoom out mode changing.
-			startAnimationRef.current = false;
-
+		if ( startAnimation ) {
 			/**
 			 * If we already have an animation running, reverse it.
 			 */
@@ -451,6 +422,7 @@ export function useScaleCanvas( {
 		containerHeight,
 		maxContainerWidth,
 		scaleContainerWidth,
+		isZoomedOut,
 	] );
 
 	return {