Animar la disposición de la cuadrícula utilizando variables CSS.

Estoy tratando de animar una cuadrícula usando transiciones. Hasta donde puedo ver, esto debería implementarse: https://ishoudinireadyyet.com/

Incluso encontré una demostración de que esto funciona: https://codepen.io/matuzo/post/animating-css-grid-layout-properties

Pero no puedo hacer que funcione yo mismo. ¿Qué estoy haciendo mal? 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: ‘‘;
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;
}