diff --git a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index b52b75952fb..88bb47022fd 100644
--- a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiCollapsibleNav close button can be hidden 1`] = `
       <nav
         aria-describedby="generated-id"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -69,7 +69,7 @@ exports[`EuiCollapsibleNav is rendered 1`] = `
         aria-describedby="generated-id"
         aria-label="aria-label"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay-euiTestCss"
+        class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay-euiTestCss"
         data-autofocus="true"
         data-test-subj="test subject string"
         id="id"
@@ -122,7 +122,7 @@ exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
       <nav
         aria-describedby="generated-id"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -179,7 +179,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
       <nav
         aria-describedby="generated-id"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -231,7 +231,7 @@ exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
       <nav
         aria-describedby="generated-id"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -280,7 +280,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
       id="id"
       style="inline-size: 320px;"
     />
@@ -307,7 +307,7 @@ exports[`EuiCollapsibleNav props onClose 1`] = `
       <nav
         aria-describedby="generated-id"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -361,7 +361,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
       id="id"
       style="inline-size: 320px;"
     />
@@ -388,7 +388,7 @@ exports[`EuiCollapsibleNav props size 1`] = `
       <nav
         aria-describedby="generated-id"
         aria-modal="true"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
diff --git a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index b6ff35f7a21..ba7b15a27bd 100644
--- a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
     >
       <nav
         aria-label="aria-label"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 248px;"
@@ -89,7 +89,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
     >
       <nav
         aria-label="Site menu"
-        class="euiFlyout euiFlyout--open euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 48px;"
diff --git a/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 6625bbe2229..25643f1a458 100644
--- a/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiFlyout is rendered 1`] = `
           aria-describedby="generated-id"
           aria-label="aria-label"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
+          class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
           data-autofocus="true"
           data-test-subj="test subject string"
           role="dialog"
@@ -73,7 +73,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           id="imaflyout"
           role="dialog"
@@ -128,7 +128,7 @@ exports[`EuiFlyout props closeButtonPosition can be outside 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -182,7 +182,7 @@ exports[`EuiFlyout props closeButtonProps 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -236,7 +236,7 @@ exports[`EuiFlyout props hideCloseButton 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -278,7 +278,7 @@ exports[`EuiFlyout props is rendered as nav 1`] = `
         <nav
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -333,7 +333,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom number 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           style="max-inline-size: 1024px;"
@@ -389,7 +389,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom value and measurement 1
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           style="max-inline-size: 24rem;"
@@ -445,7 +445,7 @@ exports[`EuiFlyout props maxWidth can be set to a default 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -500,7 +500,7 @@ exports[`EuiFlyout props outsideClickCloses 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -555,7 +555,7 @@ exports[`EuiFlyout props ownFocus can alter mask props with maskProps without th
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -610,7 +610,7 @@ exports[`EuiFlyout props ownFocus can be false 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -665,7 +665,7 @@ exports[`EuiFlyout props paddingSize l is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -720,7 +720,7 @@ exports[`EuiFlyout props paddingSize m is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-m-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-m-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -775,7 +775,7 @@ exports[`EuiFlyout props paddingSize none is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-none-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-none-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -830,7 +830,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-s-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-s-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -869,7 +869,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
 
 exports[`EuiFlyout props push flyouts renders 1`] = `
 <div
-  class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-push-right-noAnimation-right"
+  class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-noAnimation-right"
   data-test-subj="flyout"
 >
   <button
@@ -905,7 +905,7 @@ exports[`EuiFlyout props sides left is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-left-left"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-left-left"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -959,7 +959,7 @@ exports[`EuiFlyout props sides right is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -1014,7 +1014,7 @@ exports[`EuiFlyout props size accepts custom number 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           style="inline-size: 500px;"
@@ -1070,7 +1070,7 @@ exports[`EuiFlyout props size fill is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-fill-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-fill-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -1125,7 +1125,7 @@ exports[`EuiFlyout props size l is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-l-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-l-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -1180,7 +1180,7 @@ exports[`EuiFlyout props size m is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -1235,7 +1235,7 @@ exports[`EuiFlyout props size s is rendered 1`] = `
         <div
           aria-describedby="generated-id"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open emotion-euiFlyout-l-s-noMaxWidth-overlay-right-right"
+          class="euiFlyout emotion-euiFlyout-l-s-noMaxWidth-overlay-right-right"
           data-autofocus="true"
           role="dialog"
           tabindex="0"
@@ -1295,7 +1295,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
           aria-describedby="generated-id"
           aria-label="aria-label"
           aria-modal="true"
-          class="euiFlyout euiFlyout--open testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
+          class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
           data-autofocus="true"
           data-test-subj="test subject string"
           role="dialog"
diff --git a/packages/eui/src/components/flyout/flyout.component.tsx b/packages/eui/src/components/flyout/flyout.component.tsx
index 13cbd9e64af..d85ba5d198d 100644
--- a/packages/eui/src/components/flyout/flyout.component.tsx
+++ b/packages/eui/src/components/flyout/flyout.component.tsx
@@ -22,7 +22,6 @@ import React, {
   MutableRefObject,
   ReactNode,
   JSX,
-  AnimationEventHandler,
 } from 'react';
 import classnames from 'classnames';
 
@@ -71,33 +70,13 @@ import { useIsPushed } from './hooks';
 import { EuiFlyoutMenu, EuiFlyoutMenuProps } from './flyout_menu';
 import { EuiFlyoutResizeButton } from './_flyout_resize_button';
 import { useEuiFlyoutResizable } from './use_flyout_resizable';
-import {
-  useEuiFlyoutOpenState,
-  type EuiFlyoutOpenState,
-} from './use_open_state';
 import type { EuiFlyoutCloseEvent } from './types';
 
 interface _EuiFlyoutComponentProps {
-  /**
-   * Whether the flyout is open (visible) or closed (hidden).
-   * It defaults to `true` for backwards compatibility.
-   * @default true
-   */
-  isOpen?: boolean;
   /**
    * A required callback function fired when the flyout is closed.
-   * It fires after the closing animation is finished.
-   *
-   * Use this callback to toggle your internal `isOpen` flyout state.
    */
   onClose: (event?: EuiFlyoutCloseEvent) => void;
-  /**
-   * An optional callback function fired when the flyout begins closing.
-   *
-   * Use in case you need to support any extra logic that relies on the flyout
-   * closing state. In most cases this callback doesn't need to be handled.
-   */
-  onClosing?: (event?: EuiFlyoutCloseEvent) => void;
   /**
    * Defines the width of the panel.
    * Pass a predefined size of `s | m | l`, or pass any number/string compatible with the CSS `width` attribute
@@ -220,14 +199,6 @@ interface _EuiFlyoutComponentProps {
 
 const defaultElement = 'div';
 
-const openStateToClassNameMap: Record<EuiFlyoutOpenState, string> = {
-  opening: 'euiFlyout--opening',
-  open: 'euiFlyout--open',
-  closing: 'euiFlyout--closing',
-  // No special class needed for the closed state
-  closed: '',
-};
-
 type Props<T extends ElementType> = CommonProps & {
   /**
    * Sets the HTML element for `EuiFlyout`
@@ -276,24 +247,12 @@ export const EuiFlyoutComponent = forwardRef(
       resizable = false,
       minWidth,
       onResize,
-      isOpen = true,
-      onClosing,
-      onAnimationEnd: _onAnimationEnd,
+      onAnimationEnd,
       ...rest
     } = usePropsWithComponentDefaults('EuiFlyout', props);
 
     const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
 
-    const {
-      openState,
-      onAnimationEnd: onAnimationEndFlyoutOpenState,
-      closeFlyout,
-    } = useEuiFlyoutOpenState({
-      isOpen,
-      onClose,
-      onClosing,
-    });
-
     const Element = as || defaultElement;
     const maskRef = useRef<HTMLDivElement>(null);
 
@@ -433,10 +392,10 @@ export const EuiFlyoutComponent = forwardRef(
       (event: KeyboardEvent) => {
         if (!isPushed && event.key === keys.ESCAPE && shouldCloseOnEscape) {
           event.preventDefault();
-          closeFlyout(event);
+          onClose(event);
         }
       },
-      [closeFlyout, isPushed, shouldCloseOnEscape]
+      [onClose, isPushed, shouldCloseOnEscape]
     );
 
     const siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
@@ -475,11 +434,7 @@ export const EuiFlyoutComponent = forwardRef(
       styles[side],
     ];
 
-    const classes = classnames(
-      'euiFlyout',
-      openStateToClassNameMap[openState],
-      className
-    );
+    const classes = classnames('euiFlyout', className);
 
     const flyoutToggle = useRef<Element | null>(document.activeElement);
     const [focusTrapShards, setFocusTrapShards] = useState<HTMLElement[]>([]);
@@ -600,32 +555,19 @@ export const EuiFlyoutComponent = forwardRef(
         if (outsideClickCloses === false) return undefined;
         if (hasOverlayMask) {
           // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-          if (event.target === maskRef.current) return closeFlyout(event);
+          if (event.target === maskRef.current) return onClose(event);
         } else {
           // No overlay mask is present, so any outside clicks should close the flyout
-          if (outsideClickCloses === true) return closeFlyout(event);
+          if (outsideClickCloses === true) return onClose(event);
         }
         // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
         return undefined;
       },
-      [closeFlyout, hasOverlayMask, outsideClickCloses]
+      [onClose, hasOverlayMask, outsideClickCloses]
     );
 
     const maskCombinedRefs = useCombinedRefs([maskProps?.maskRef, maskRef]);
 
-    const onAnimationEnd = useCallback<AnimationEventHandler>(
-      (event) => {
-        onAnimationEndFlyoutOpenState(event);
-        _onAnimationEnd?.(event);
-      },
-      [_onAnimationEnd, onAnimationEndFlyoutOpenState]
-    );
-
-    if (openState === 'closed') {
-      // Render null only if the flyout is completely closed
-      return null;
-    }
-
     return (
       <EuiFlyoutComponentWrapper
         hasOverlayMask={hasOverlayMask}
@@ -662,7 +604,7 @@ export const EuiFlyoutComponent = forwardRef(
             {!_flyoutMenuProps && !hideCloseButton && (
               <EuiFlyoutCloseButton
                 {...closeButtonProps}
-                onClose={closeFlyout}
+                onClose={onClose}
                 closeButtonPosition={closeButtonPosition}
                 side={side}
               />
diff --git a/packages/eui/src/components/flyout/flyout.stories.tsx b/packages/eui/src/components/flyout/flyout.stories.tsx
index a90c754024e..723cfc3ae48 100644
--- a/packages/eui/src/components/flyout/flyout.stories.tsx
+++ b/packages/eui/src/components/flyout/flyout.stories.tsx
@@ -54,15 +54,11 @@ type Story = StoryObj<EuiFlyoutProps>;
 
 const onClose = action('onClose');
 
-const onClosing = action('onClosing');
-
 const StatefulFlyout = (
-  props: Partial<
-    EuiFlyoutProps & { isOpen: boolean; onToggle: (open: boolean) => void }
-  >
+  props: Partial<EuiFlyoutProps & { onToggle: (open: boolean) => void }>
 ) => {
-  const { isOpen, onToggle } = props;
-  const [_isOpen, setIsOpen] = useState(isOpen ?? true);
+  const { onToggle } = props;
+  const [_isOpen, setIsOpen] = useState(true);
 
   const handleToggle = (open: boolean) => {
     setIsOpen(open);
@@ -74,15 +70,15 @@ const StatefulFlyout = (
       <EuiButton size="s" onClick={() => handleToggle(!_isOpen)}>
         Toggle flyout
       </EuiButton>
-      <EuiFlyout
-        {...props}
-        isOpen={_isOpen}
-        onClose={() => {
-          handleToggle(false);
-          onClose();
-        }}
-        onClosing={onClosing}
-      />
+      {_isOpen && (
+        <EuiFlyout
+          {...props}
+          onClose={() => {
+            handleToggle(false);
+            onClose();
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts
index 2bebca12a3d..d7b2560c937 100644
--- a/packages/eui/src/components/flyout/flyout.styles.ts
+++ b/packages/eui/src/components/flyout/flyout.styles.ts
@@ -125,30 +125,15 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
       clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
       ${logicalCSS('right', 0)}
 
-      &.euiFlyout--opening {
-        /*
-          Jump animation states immediately unless
-          prefers-reduced-motion: reduce is *not* set
-        */
-        animation: ${euiFlyoutSlideInRight} 0s ${euiTheme.animation.resistance}
-          forwards;
-
-        ${euiCanAnimate} {
-          animation-duration: ${euiTheme.animation.normal};
-        }
-      }
-
-      &.euiFlyout--closing {
-        /*
-          Jump animation states immediately unless
-          prefers-reduced-motion: reduce is *not* set
-        */
-        animation: ${euiFlyoutSlideOutRight} 0s ${euiTheme.animation.resistance}
-          forwards;
-
-        ${euiCanAnimate} {
-          animation-duration: ${euiTheme.animation.normal};
-        }
+      /*
+        Jump animation states immediately unless
+        prefers-reduced-motion: reduce is *not* set
+      */
+      animation: ${euiFlyoutSlideInRight} 0s ${euiTheme.animation
+        .resistance} forwards;
+
+      ${euiCanAnimate} {
+        animation-duration: ${euiTheme.animation.normal};
       }
 
       &.euiFlyout--hasChild {
@@ -160,30 +145,15 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('left', 0)}
       clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
 
-      &.euiFlyout--opening {
-        /*
-          Jump animation states immediately unless
-          prefers-reduced-motion: reduce is *not* set
-        */
-        animation: ${euiFlyoutSlideInLeft} 0s ${euiTheme.animation.resistance}
-          forwards;
+      /*
+        Jump animation states immediately unless
+        prefers-reduced-motion: reduce is *not* set
+      */
+      animation: ${euiFlyoutSlideInLeft} 0s ${euiTheme.animation.resistance}
+        forwards;
 
-        ${euiCanAnimate} {
-          animation-duration: ${euiTheme.animation.normal};
-        }
-      }
-
-      &.euiFlyout--closing {
-        /*
-          Jump animation states immediately unless
-          prefers-reduced-motion: reduce is *not* set
-        */
-        animation: ${euiFlyoutSlideOutLeft} 0s ${euiTheme.animation.resistance}
-          forwards;
-
-        ${euiCanAnimate} {
-          animation-duration: ${euiTheme.animation.normal};
-        }
+      ${euiCanAnimate} {
+        animation-duration: ${euiTheme.animation.normal};
       }
     `,
 
diff --git a/packages/eui/src/components/flyout/manager/flyout_managed.tsx b/packages/eui/src/components/flyout/manager/flyout_managed.tsx
index 76014ef2735..49f1994a8d2 100644
--- a/packages/eui/src/components/flyout/manager/flyout_managed.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_managed.tsx
@@ -76,7 +76,6 @@ export const EuiManagedFlyout = ({
   level,
   size = 'm',
   css: customCss,
-  isOpen = true,
   flyoutMenuProps: _flyoutMenuProps,
   ...props
 }: EuiManagedFlyoutProps) => {
@@ -141,29 +140,30 @@ export const EuiManagedFlyout = ({
 
   // Register with flyout manager context when open, remove when closed
   useEffect(() => {
-    if (isOpen) {
-      addFlyout(flyoutId, title!, level, size as string);
-    } else {
+    addFlyout(flyoutId, title!, level, size as string);
+
+    return () => {
       closeFlyout(flyoutId);
+
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
-    }
-  }, [isOpen, flyoutId, title, level, size, addFlyout, closeFlyout]);
+    };
+  }, [flyoutId, title, level, size, addFlyout, closeFlyout]);
 
   // Detect when flyout has been removed from manager state (e.g., via Back button)
   // and trigger onClose callback to notify the parent component
   useEffect(() => {
-    if (isOpen && flyoutExistsInManager) {
+    if (flyoutExistsInManager) {
       wasRegisteredRef.current = true;
     }
 
     // If flyout was previously registered, is marked as open, but no longer exists in manager state,
     // it was removed via navigation (Back button) - trigger close callback
-    if (wasRegisteredRef.current && isOpen && !flyoutExistsInManager) {
+    if (wasRegisteredRef.current && !flyoutExistsInManager) {
       onCloseCallbackRef.current?.(new MouseEvent('navigation'));
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
     }
-  }, [flyoutExistsInManager, isOpen, flyoutId]);
+  }, [flyoutExistsInManager, flyoutId]);
 
   // Monitor current session changes and fire onActive callback when this flyout becomes active
   useEffect(() => {
@@ -248,7 +248,6 @@ export const EuiManagedFlyout = ({
             size,
             flyoutMenuProps,
             onAnimationEnd,
-            isOpen,
             [PROPERTY_FLYOUT]: true,
             [PROPERTY_LAYOUT_MODE]: layoutMode,
             [PROPERTY_LEVEL]: level,
diff --git a/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
index 663017152ac..e54333e55c7 100644
--- a/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
@@ -221,84 +221,86 @@ const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
         <EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
       )}
 
-      <EuiFlyout
-        isOpen={isMainOpen}
-        session={true}
-        id="flyout-manager-playground-main"
-        size={mainSize}
-        type={mainFlyoutType}
-        pushMinBreakpoint={pushMinBreakpoint}
-        maxWidth={mainMaxWidth}
-        ownFocus={false}
-        resizable={mainFlyoutResizable}
-        aria-label={`Main Flyout Menu (${mainSize})`}
-        {...args}
-        onClose={closeMain}
-      >
-        <EuiFlyoutBody>
-          <EuiText>
-            <p>This is the main flyout content.</p>
-            <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
-              neque sequi illo, cum rerum quia ab animi velit sit incidunt
-              inventore temporibus eaque nam veritatis amet maxime maiores optio
-              quam?
-            </p>
-          </EuiText>
-          <EuiSpacer />
+      {isMainOpen && (
+        <EuiFlyout
+          session={true}
+          id="flyout-manager-playground-main"
+          size={mainSize}
+          type={mainFlyoutType}
+          pushMinBreakpoint={pushMinBreakpoint}
+          maxWidth={mainMaxWidth}
+          ownFocus={false}
+          resizable={mainFlyoutResizable}
+          aria-label={`Main Flyout Menu (${mainSize})`}
+          {...args}
+          onClose={closeMain}
+        >
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>This is the main flyout content.</p>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+                neque sequi illo, cum rerum quia ab animi velit sit incidunt
+                inventore temporibus eaque nam veritatis amet maxime maiores
+                optio quam?
+              </p>
+            </EuiText>
+            <EuiSpacer />
 
-          {!isChildOpen ? (
-            <EuiButton onClick={openChild}>Open child panel</EuiButton>
-          ) : (
-            <EuiButton onClick={closeChild}>Close child panel</EuiButton>
-          )}
-          <EuiFlyout
-            isOpen={isChildOpen}
-            id="flyout-manager-playground-child"
-            size={childSize}
-            backgroundStyle={childBackgroundStyle}
-            maxWidth={childMaxWidth}
-            ownFocus={false}
-            resizable={childFlyoutResizable}
-            {...args}
-            aria-label={`Child Flyout Panel (${childSize})`}
-            onClose={closeChild}
-          >
-            <EuiFlyoutBody>
+            {!isChildOpen ? (
+              <EuiButton onClick={openChild}>Open child panel</EuiButton>
+            ) : (
+              <EuiButton onClick={closeChild}>Close child panel</EuiButton>
+            )}
+            {isChildOpen && (
+              <EuiFlyout
+                id="flyout-manager-playground-child"
+                size={childSize}
+                backgroundStyle={childBackgroundStyle}
+                maxWidth={childMaxWidth}
+                ownFocus={false}
+                resizable={childFlyoutResizable}
+                {...args}
+                aria-label={`Child Flyout Panel (${childSize})`}
+                onClose={closeChild}
+              >
+                <EuiFlyoutBody>
+                  <EuiText>
+                    <p>This is the child flyout content.</p>
+                    <p>Size restrictions apply:</p>
+                    <ul>
+                      <li>When main panel is 's', child can be 's', or 'm'</li>
+                      <li>When main panel is 'm', child is limited to 's'</li>
+                    </ul>
+                    <EuiSpacer />
+                    <p>
+                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                      Dolorum neque sequi illo, cum rerum quia ab animi velit
+                      sit incidunt inventore temporibus eaque nam veritatis amet
+                      maxime maiores optio quam?
+                    </p>
+                  </EuiText>
+                </EuiFlyoutBody>
+                {showFooter && (
+                  <EuiFlyoutFooter>
+                    <EuiText>
+                      <p>Child flyout footer</p>
+                    </EuiText>
+                  </EuiFlyoutFooter>
+                )}
+                {/* Footer is optional */}
+              </EuiFlyout>
+            )}
+          </EuiFlyoutBody>
+          {showFooter && (
+            <EuiFlyoutFooter>
               <EuiText>
-                <p>This is the child flyout content.</p>
-                <p>Size restrictions apply:</p>
-                <ul>
-                  <li>When main panel is 's', child can be 's', or 'm'</li>
-                  <li>When main panel is 'm', child is limited to 's'</li>
-                </ul>
-                <EuiSpacer />
-                <p>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Dolorum neque sequi illo, cum rerum quia ab animi velit sit
-                  incidunt inventore temporibus eaque nam veritatis amet maxime
-                  maiores optio quam?
-                </p>
+                <p>Main flyout footer</p>
               </EuiText>
-            </EuiFlyoutBody>
-            {showFooter && (
-              <EuiFlyoutFooter>
-                <EuiText>
-                  <p>Child flyout footer</p>
-                </EuiText>
-              </EuiFlyoutFooter>
-            )}
-            {/* Footer is optional */}
-          </EuiFlyout>
-        </EuiFlyoutBody>
-        {showFooter && (
-          <EuiFlyoutFooter>
-            <EuiText>
-              <p>Main flyout footer</p>
-            </EuiText>
-          </EuiFlyoutFooter>
-        )}
-      </EuiFlyout>
+            </EuiFlyoutFooter>
+          )}
+        </EuiFlyout>
+      )}
     </>
   );
 };
diff --git a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
index 3c3683ee731..514d8298b40 100644
--- a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
@@ -96,80 +96,80 @@ const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
           Open {title}
         </EuiButton>
       </EuiText>
-      <EuiFlyout
-        isOpen={isFlyoutVisible}
-        id={`mainFlyout-${title}`}
-        session={true}
-        flyoutMenuProps={{ title: `${title} - Main` }}
-        size={mainSize}
-        maxWidth={mainMaxWidth}
-        type={flyoutType}
-        ownFocus={false}
-        pushAnimation={true}
-        onActive={mainFlyoutOnActive}
-        onClose={mainFlyoutOnClose}
-      >
-        <EuiFlyoutBody>
-          <EuiText>
-            <p>This is the content of {title}.</p>
-            <EuiSpacer size="s" />
-            <EuiDescriptionList
-              type="column"
-              listItems={[
-                { title: 'Flyout type', description: flyoutType },
-                {
-                  title: 'Main flyout size',
-                  description: mainSize ?? 'undefined (`m` by default)',
-                },
-                {
-                  title: 'Main flyout maxWidth',
-                  description: mainMaxWidth ?? 'N/A',
-                },
-              ]}
-            />
-            {childSize && (
-              <EuiButton
-                onClick={handleOpenChildFlyout}
-                disabled={isChildFlyoutVisible}
-              >
-                Open child flyout
-              </EuiButton>
-            )}
-          </EuiText>
-        </EuiFlyoutBody>
-        {childSize && (
-          <EuiFlyout
-            isOpen={isChildFlyoutVisible}
-            id={`childFlyout-${title}`}
-            flyoutMenuProps={{ title: `${title} - Child` }}
-            aria-labelledby="childFlyoutTitle"
-            size={childSize}
-            maxWidth={childMaxWidth}
-            onActive={childFlyoutOnActive}
-            onClose={childFlyoutOnClose}
-          >
-            <EuiFlyoutBody>
-              <EuiText>
-                <p>This is the content of the child flyout of {title}.</p>
-                <EuiSpacer size="s" />
-                <EuiDescriptionList
-                  type="column"
-                  listItems={[
-                    {
-                      title: 'Child flyout size',
-                      description: childSize ?? 'N/A',
-                    },
-                    {
-                      title: 'Child flyout maxWidth',
-                      description: childMaxWidth ?? 'N/A',
-                    },
-                  ]}
-                />
-              </EuiText>
-            </EuiFlyoutBody>
-          </EuiFlyout>
-        )}
-      </EuiFlyout>
+      {isFlyoutVisible && (
+        <EuiFlyout
+          id={`mainFlyout-${title}`}
+          session={true}
+          flyoutMenuProps={{ title: `${title} - Main` }}
+          size={mainSize}
+          maxWidth={mainMaxWidth}
+          type={flyoutType}
+          ownFocus={false}
+          pushAnimation={true}
+          onActive={mainFlyoutOnActive}
+          onClose={mainFlyoutOnClose}
+        >
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>This is the content of {title}.</p>
+              <EuiSpacer size="s" />
+              <EuiDescriptionList
+                type="column"
+                listItems={[
+                  { title: 'Flyout type', description: flyoutType },
+                  {
+                    title: 'Main flyout size',
+                    description: mainSize ?? 'undefined (`m` by default)',
+                  },
+                  {
+                    title: 'Main flyout maxWidth',
+                    description: mainMaxWidth ?? 'N/A',
+                  },
+                ]}
+              />
+              {childSize && (
+                <EuiButton
+                  onClick={handleOpenChildFlyout}
+                  disabled={isChildFlyoutVisible}
+                >
+                  Open child flyout
+                </EuiButton>
+              )}
+            </EuiText>
+          </EuiFlyoutBody>
+          {childSize && isChildFlyoutVisible && (
+            <EuiFlyout
+              id={`childFlyout-${title}`}
+              flyoutMenuProps={{ title: `${title} - Child` }}
+              aria-labelledby="childFlyoutTitle"
+              size={childSize}
+              maxWidth={childMaxWidth}
+              onActive={childFlyoutOnActive}
+              onClose={childFlyoutOnClose}
+            >
+              <EuiFlyoutBody>
+                <EuiText>
+                  <p>This is the content of the child flyout of {title}.</p>
+                  <EuiSpacer size="s" />
+                  <EuiDescriptionList
+                    type="column"
+                    listItems={[
+                      {
+                        title: 'Child flyout size',
+                        description: childSize ?? 'N/A',
+                      },
+                      {
+                        title: 'Child flyout maxWidth',
+                        description: childMaxWidth ?? 'N/A',
+                      },
+                    ]}
+                  />
+                </EuiText>
+              </EuiFlyoutBody>
+            </EuiFlyout>
+          )}
+        </EuiFlyout>
+      )}
     </>
   );
 });
diff --git a/packages/eui/src/components/flyout/use_open_state.ts b/packages/eui/src/components/flyout/use_open_state.ts
index 644e064e40d..a7c1ff747df 100644
--- a/packages/eui/src/components/flyout/use_open_state.ts
+++ b/packages/eui/src/components/flyout/use_open_state.ts
@@ -6,85 +6,21 @@
  * Side Public License, v 1.
  */
 
-import { AnimationEventHandler, useCallback, useEffect, useState } from 'react';
-import type { EuiFlyoutProps } from './flyout';
-import { useIsInManagedFlyout } from './manager';
-import type { EuiFlyoutCloseEvent } from './types';
+import { AnimationEventHandler, useCallback, useState } from 'react';
 
-export type EuiFlyoutOpenState = 'opening' | 'open' | 'closing' | 'closed';
+export type EuiFlyoutOpenState = 'opening' | 'open';
 
-interface UseEuiFlyoutOpenStateArgs {
-  isOpen: EuiFlyoutProps['isOpen'];
-  onClose: EuiFlyoutProps['onClose'];
-  onClosing: EuiFlyoutProps['onClosing'];
-}
-
-export const useEuiFlyoutOpenState = ({
-  isOpen,
-  onClose,
-  onClosing,
-}: UseEuiFlyoutOpenStateArgs) => {
-  const [openState, setOpenState] = useState<EuiFlyoutOpenState>(
-    isOpen ? 'open' : 'closed'
-  );
-  const isInManagedFlyout = useIsInManagedFlyout();
-
-  useEffect(() => {
-    // Check for matching state
-    if (
-      (isOpen && openState === 'open') ||
-      (!isOpen && openState === 'closed')
-    ) {
-      return;
-    }
-
-    if (isOpen && (openState === 'closing' || openState === 'closed')) {
-      setOpenState('opening');
-    }
-
-    if (!isOpen && (openState === 'opening' || openState === 'open')) {
-      setOpenState('closing');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
-
-  useEffect(() => {
-    // For managed flyouts, don't auto-call onClose - let the manager handle it
-    if (openState === 'closed' && !isInManagedFlyout) {
-      onClose();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openState, isInManagedFlyout]);
+export const useEuiFlyoutOpenState = () => {
+  const [openState, setOpenState] = useState<EuiFlyoutOpenState>('opening');
 
   const onAnimationEnd = useCallback<AnimationEventHandler>(() => {
-    if (openState === 'closing') {
-      setOpenState('closed');
-    }
-
     if (openState === 'opening') {
       setOpenState('open');
     }
   }, [openState, setOpenState]);
 
-  const closeFlyout = useCallback(
-    (event?: EuiFlyoutCloseEvent) => {
-      if (openState === 'closed' || openState === 'closing') {
-        return;
-      }
-
-      onClosing?.(event);
-
-      setOpenState('closing');
-
-      // onClose() will be called by the effect above when openState === 'closed'
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [openState, setOpenState]
-  );
-
   return {
     openState,
     onAnimationEnd,
-    closeFlyout,
   };
 };