diff --git a/packages/components/src/utils/animate.ts b/packages/components/src/utils/animate.ts
index 10b5e497f2..76538464e7 100644
--- a/packages/components/src/utils/animate.ts
+++ b/packages/components/src/utils/animate.ts
@@ -61,13 +61,18 @@ export const KEYFRAMES = {
       offset: 0,
       ...keyframeDefaults,
       opacity: 0,
-      transform: 'translateY(-3rem)',
+      /**
+       * we are not using transform here to avoid breaking positioning for nested fixed elements (i.e. a flyout menu in an animated modal)
+       * see 'fixed' section @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
+       */
+
+      top: '-3rem',
     },
     {
       offset: 1,
       ...keyframeDefaults,
       opacity: 1,
-      transform: 'translateY(0)',
+      top: 0,
     },
   ],
 };