animation cuts out when it runs a second time

November 1, 2022

const menu = document.querySelector('.pageLinksButton')
const links = document.querySelector('.pageLinks')

menu.addEventListener('click', () => {
  menu.classList.toggle("active");
  links.classList.toggle("linksActive");
})

body {
  background-color: #323232;
  position: relative;
}

@keyframes slide {
  0% {
    opacity: 0.0;
    transform: translateY(50px)
  }
  20% {
    opacity: 0.2;
    transform: translateY(40px)
  }
  40% {
    opacity: 0.4;
    transform: translateY(30px)
  }
  60% {
    opacity: 0.6;
    transform: translateY(20px)
  }
  80% {
    opacity: 0.8;
    transform: translateY(10px)
  }
  100% {
    opacity: 1.0;
    transform: translateY(00px)
  }
}

.pageLinks {
  display: none;
  position: fixed;
  top: 5%;
  right: 50%;
  transition: 1s ease;
}

.pageLinks.linksActive {
  display: block;
}

.pageLinks ul {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  list-style: none;
}

.pageLinks ul li {
  float: left;
  margin: 20px 0px;
  animation: slide 0.3s linear;
}

.pageLinks ul li a {
  color: #DBDBDB;
  font-family: 'poppins', sans-serif;
  font-size: 16px;
  text-decoration: none;
  margin: 0;
}

.pageLinksButton {
  cursor: pointer;
  transition: transform 800ms;
  position: fixed;
  top: 0%;
  right: 49%;
}

.line {
  fill: none;
  transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

.pageLinksButton.active {
  transform: rotate(-45deg);
}

.line:nth-child(1) {
  stroke-dasharray: 25 120;
}

.line:nth-child(3) {
  stroke-dasharray: 25 120;
}

.pageLinksButton.active .line:nth-child(1) {
  stroke-dashoffset: -90px;
}

.pageLinksButton.active .line:nth-child(3) {
  stroke-dashoffset: -90px;
}

<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
      <path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
      <path class="line" d="m 70,50 h -40" />
      <path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
    </svg>

<nav class="pageLinks">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
  </ul>
</nav>

Animation works when links are opened, but not when I close them.
I tried to animate other classes, but it was worse, that’s the most I could do

>Solution :

Well, first of your animation is working only in one direction. Secondly, you’re using "display: none" property. In your case the moment you "click" to hide menu your elements acquire "display: none" property which make them vanish instantly.

In my example I’ve just created another animation called "slide-reversed" and changed display: none; for opacity property. However, this isn’t a solution, because underneath the elements are still present and "clickable". There isn’t css solution to animate properties like display or visibility, so I would recommend either play with width and overflow to achieve what you want, or delay property change via JS.

Example without display:none;

const menu = document.querySelector(".pageLinksButton");
const links = document.querySelector(".pageLinks");

menu.addEventListener("click", () => {
  menu.classList.toggle("active");
  links.classList.toggle("linksActive");
});

body {
  background-color: #323232;
  position: relative;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  20% {
    opacity: 0.2;
    transform: translateY(40px);
  }
  40% {
    opacity: 0.4;
    transform: translateY(30px);
  }
  60% {
    opacity: 0.6;
    transform: translateY(20px);
  }
  80% {
    opacity: 0.8;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(00px);
  }
}

@keyframes slide-reverse {
  100% {
    opacity: 0;
    transform: translateY(50px);
  }
  80% {
    opacity: 0.2;
    transform: translateY(40px);
  }
  60% {
    opacity: 0.4;
    transform: translateY(30px);
  }
  40% {
    opacity: 0.6;
    transform: translateY(20px);
  }
  20% {
    opacity: 0.8;
    transform: translateY(10px);
  }
  0% {
    opacity: 1;
    transform: translateY(00px);
  }
}

.pageLinks {
  /* display: none; */
  opacity: 0;
  position: fixed;
  top: 15%;
  right: 50%;
  transition: 0s ease;
  transition-delay: 0.3s;
}

.pageLinks.linksActive {
  transition: 0.3s ease;
  transition-delay: 0s;
  opacity: 1;
}

.pageLinks ul {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  list-style: none;
}

.pageLinks ul li {
  float: left;
  margin: 20px 0px;
  animation: slide-reverse 0.3s linear;
}

.pageLinks.linksActive ul li {
  float: left;
  margin: 20px 0px;
  animation: slide 0.3s linear;
}

.pageLinks ul li a {
  color: #dbdbdb;
  font-family: "poppins", sans-serif;
  font-size: 16px;
  text-decoration: none;
  margin: 0;
}

.pageLinksButton {
  cursor: pointer;
  transition: transform 800ms;
  position: fixed;
  top: 0%;
  right: 49%;
}

.line {
  fill: none;
  transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

.pageLinksButton.active {
  transform: rotate(-45deg);
}
.line:nth-child(1) {
  stroke-dasharray: 25 120;
}
.line:nth-child(3) {
  stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
  stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
  stroke-dashoffset: -90px;
}

<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
      <path
        class="line"
        d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"
      />
      <path class="line" d="m 70,50 h -40" />
      <path
        class="line"
        d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"
      />
    </svg>

    <nav class="pageLinks">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </nav>