Animation in secondary menu

Hi.

I am referring to a forum entry from the past, in which an animation for the first menu was realized:

https://generatepress.com/forums/topic/customize-burger-menu/page/2/#post-528197

I have modified these as follows:

add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
add_action( 'generate_inside_secondary_mobile_menu', 'tu_custom_mobile_menu' );
function tu_custom_mobile_menu() {
?>
    <div class="wrapper-menu">
        <div class="line-menu half start"></div>
        <div class="line-menu"></div>
        <div class="line-menu half end"></div>
    </div>
<?php
}

Adding a Element into the wp_footer:

<script>

var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
  wrapperMenu.classList.toggle('open');  
});

</script>

Adding this modified css:

/* Menu animation secondary navigation */

#secondary-navigation .menu-toggle:before,
.menu-toggle .mobile-menu {
    display: none;
}

.wrapper-menu {
  width: 25px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 330ms ease-out;
}

.wrapper-menu.open {
  transform: rotate(-45deg);  
}

.line-menu {
  background-color: #111;
  border-radius: 5px;
  width: 100%;
  height: 6px;
}

.line-menu.half {
  width: 50%;
}

.line-menu.start {
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transform-origin: right;
}

.open .line-menu.start {
  transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
  align-self: flex-end;
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transform-origin: left;
}

.open .line-menu.end {
  transform: rotate(-90deg) translateX(-3px);
}

Somehow I can't get the animation.

I know it's a very special question. However I notice in the many forum entries here that a form of the animation is at least desired.

What do you think I'm doing wrong?