Can I make this menu animation smoother?

Question

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

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;
    }
}

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

Thanks.

user_14147589 · Answer

The following code should be close enough to the solution you are aiming for. The transition can be modified according to your needs and the seconds must be adapted accordingly.

.container{
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.navmenu {
  transition: all 0.8s;
}

.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 linear;
}

.l2 {
width: 40px;
transition: all 0.3s linear;
}

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

.navmenu:hover>.l1 {
  width: 40px;
  position: relative;
  top: 7px;
  transform: rotate(-45deg);
}

.navmenu:hover>.l3 {
 width: 40px;
 position: relative;
 top: -7px;
 transform: rotate(45deg);
}

.navmenu:hover>.l2 {
height: 1.5px;
opacity:0;
}

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

Can I make this menu animation smoother?

1 Answers