diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
index d436fb49..4a70c0f6 100644
--- a/packages/_helpers/expand-transition.tsx
+++ b/packages/_helpers/expand-transition.tsx
@@ -8,6 +8,7 @@ export function ExpandTransition({
   const [removeElement, setRemoveElement] = useState(!show);
   const expandableRef = useRef<HTMLDivElement>(null);
   const isMounted = useRef(false);
+  const initialShow = useRef<boolean>(show === true);
 
   function collapseElement(el: HTMLElement) {
     collapse(el, () => setRemoveElement(true));
@@ -37,8 +38,15 @@ export function ExpandTransition({
     }
   }, [show]);
 
+  // Set initial style to prevent glitching bug
+  const initialStyle = !initialShow.current ? 'overflow-hidden h-0' : undefined;
+
   return (
-    <div ref={expandableRef} aria-hidden={!show ? true : undefined}>
+    <div
+      className={initialStyle}
+      ref={expandableRef}
+      aria-hidden={!show ? true : undefined}
+    >
       {removeElement ? null : children}
     </div>
   );
diff --git a/packages/expandable/stories/Expandable.stories.tsx b/packages/expandable/stories/Expandable.stories.tsx
index d29ec5b2..682c9e73 100644
--- a/packages/expandable/stories/Expandable.stories.tsx
+++ b/packages/expandable/stories/Expandable.stories.tsx
@@ -87,6 +87,14 @@ export const Animated = () => {
   );
 };
 
+export const AnimatedExpanded = () => {
+  return (
+    <Expandable title="Animated box" expanded box info animated>
+      <h1>I am expandable</h1>
+    </Expandable>
+  );
+};
+
 export const Heading = () => {
   return (
     <Expandable title="I'm also a heading" headingLevel={1}>