diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index de22a67a9..bd3c34488 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { PanelSectionContainer } from "./styles";
+import { PanelOptionsContainer, PanelSectionContainer } from "./styles";
 import { Title, Tooltip } from "./annotatedTitle";
 import { PanelHeader, PanelId } from "./panelHeader";
 import { RootState } from "../../store";
@@ -42,7 +42,9 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         optionsAreVisible={optionsAreVisible}
         setOptionsAreVisible={setOptionsAreVisible}
       />
-      {optionsAreVisible && options}
+      <PanelOptionsContainer className={`${optionsAreVisible ? "open" : ""}`}>
+        {options}
+      </PanelOptionsContainer>
     </PanelSectionContainer>
   );
 };
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 30b57b5db..702905b9a 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -48,6 +48,18 @@ export const PanelSectionContainer = styled.div`
   }
 `;
 
+export const PanelOptionsContainer = styled.div`
+  visibility: hidden;
+  transition: visibility .5s, max-height .5s;
+  max-height: 0;
+  overflow: hidden;
+
+  &.open {
+    visibility: visible;
+    max-height: 100vh;
+  }
+`
+
 export const TitleAndIconContainer = styled.span`
   display: inline-flex;
   align-items: center;