Can I make this menu animation smoother?

  animation, css, html, javascript, menu

I’m trying to turn my menu into an X shape with animations. Here’s a video of what it currently looks like.

Video

I want to make it more smooth and actually make the cross symmetrical.

I have create a code snippet with all the relevant code below.

const NAV_BTN = document.querySelector('.navmenu');
const NL_1 = document.querySelector('.l1');
const NL_2 = document.querySelector('.l2');
const NL_3 = document.querySelector('.l3');

NAV_BTN.addEventListener('click', () => {
  navToClose();
});

const navToClose = () => {
    NL_1.style.animation = '0.5s l1Close forwards';
    NL_2.style.animation = '0.5s l2Close forwards';
    NL_3.style.animation = '0.5s l3Close forwards';
};
.container{
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}
.navmenu {
  transition: all 0.5s;
}
.nline{
    width: 40px;
    height: 4px;
    border-radius: 0.5px;
    background-color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}
.l1 {
  width: 20px;
  transition: all 0.5s;
}

.l3 {
  width: 20px;
  transition: all 0.5s;
  margin-left: auto;
}

.navmenu:hover>.l1,
.navmenu:hover>.l3 {
  width: 40px;
}

.navmenu:hover {
  opacity: 0.5;
  cursor: pointer;
}


/* ANIMATIONS */

@keyframes l1Close{
    0%{
        transform: rotate(0deg);
        margin: 0;
    }
    100%{
        transform: translate(0,0) rotate(-45deg);
        width: 40px;
    }
}
@keyframes l2Close{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes l3Close{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: translate(0,0) rotate(45deg);
        width: 40px;
    }
}
<div class="container">
  <div class="navmenu">
    <div class="nline l1"></div>
    <div class="nline l2"></div>
    <div class="nline l3"></div>
  </div>
 </div>

I would appreciate any help, and will reply if you have any questions.

Thanks.

Source: Ask Javascript Questions

LEAVE A COMMENT