diff --git a/src/lib/components/ColourDemonstrator.svelte b/src/lib/components/ColourDemonstrator.svelte
index 367cecd..239e1c7 100644
--- a/src/lib/components/ColourDemonstrator.svelte
+++ b/src/lib/components/ColourDemonstrator.svelte
@@ -119,9 +119,11 @@
   }
   .controls { display: flex; flex-direction: column; gap: var(--space-xs); }
   .slider-container {
-    transition: opacity var(--duration-normal) var(--ease-out-quart), visibility var(--duration-normal);
+    transition: opacity var(--duration-normal) var(--ease-out-quart), visibility var(--duration-normal), height var(--duration-normal) var(--ease-out-quart);
     opacity: 1;
     visibility: visible;
+    height: auto;
+    overflow: hidden;
   }
   .slider-container.hidden {
     opacity: 0;