Animating grid layout using CSS variables

I’m trying to animate a grid layout using transitions. As far as I can tell, this should be implemented: https://ishoudinireadyyet.com/

I even found a demo of this working: https://codepen.io/matuzo/post/animating-css-grid-layout-properties

But I cannot get it to work myself. What am I doing wrong? https://stackblitz.com/edit/gridlayout-animation?file=index.html

const toggleSidebar = () => {
  const layoutEl = document.querySelector('.layoutEl');
  const currentWidth = getComputedStyle(layoutEl).getPropertyValue('--collapse-panel-width');
  const isOpen = currentWidth == '30rem';
  layoutEl.style.setProperty('--collapse-panel-width', !isOpen ? '30rem' : '2rem');
};
@property --collapse-panel-width {
  syntax: '<length>';
  initial-value: 2rem;
  inherits: true;
}

.layoutEl {
  --collapse-panel-width: 2rem;
  display: grid;
  overflow: hidden;
  grid-template: 
    'header   header' auto 
    'content sidebar' 1fr 
    'footer   footer' auto 
    / 1fr var(--collapse-panel-width);
  gap: 0.3rem;
  height: 100vh;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

header {
  grid-area: header;
  background-color: #0055ff;
  color: white;
}

main {
  grid-area: content;
}

aside {
  grid-area: sidebar;
  background-color: #0055ff;
  color: white;
}

footer {
  grid-area: footer;
  background-color: #0055ff;
  color: white;
}
<html>

<head>
  <meta charset="UTF-8" />
</head>

<body class="layoutEl">
  <header>Header</header>
  <main>
    <h1>Main content</h1>
    <button type="button" onclick="toggleSidebar()">Toggle sidebar</button>
  </main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</body>

</html>