diff --git a/stories/basic.stories.module.css b/stories/basic.stories.module.css
index c604129e..cfcbbc36 100644
--- a/stories/basic.stories.module.css
+++ b/stories/basic.stories.module.css
@@ -43,3 +43,15 @@
   color: rgb(30, 30, 30);
   overflow: visible;
 }
+
+/* Styles for VisibleWithAnimation demo */
+.leftPane,
+.rightPane {
+  transition: all 0.15s ease-in-out;
+  will-change: width;
+}
+.splitViewContainer:global(.split-view-sash-dragging) .leftPane,
+.splitViewContainer:global(.split-view-sash-dragging) .rightPane {
+  /* disable animation while sash dragging */
+  transition: none;
+}
diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx
index 11c7a72f..ac897a2d 100644
--- a/stories/basic.stories.tsx
+++ b/stories/basic.stories.tsx
@@ -354,6 +354,42 @@ export const Visible: Story<AllotmentProps> = (args) => {
 };
 Visible.args = {};
 
+export const VisibleWithAnimation: Story<AllotmentProps> = (args) => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div>
+      <button
+        className={styles.button}
+        type="button"
+        onClick={() => {
+          setVisible((visible) => !visible);
+        }}
+      >
+        {visible ? "Hide" : "Show"}
+      </button>
+      <div className={styles.container}>
+        <Allotment
+          {...args}
+          className={styles.splitViewContainer}
+          snap
+          onVisibleChange={(_index, value) => {
+            setVisible(value);
+          }}
+        >
+          <Allotment.Pane visible={visible} className={styles.leftPane}>
+            <Content />
+          </Allotment.Pane>
+          <Allotment.Pane className={styles.rightPane}>
+            <Content />
+          </Allotment.Pane>
+        </Allotment>
+      </div>
+    </div>
+  );
+};
+VisibleWithAnimation.args = {};
+
 export const OnReset: Story = (args) => {
   const ref = useRef<AllotmentHandle>(null!);