Cfrgtkky

This is what I have so far..

icons.addEventListener('click', (e)=>{

    if(e.target.className==="skate"){

        navigation.classList.remove('slideIn');

        navigation.classList.add('slideOut');

        skateboard.classList.add('skateOff');

        x.classList.add('xslide');

    }else{

        navigation.classList.remove('slideOut');

        navigation.classList.add('slideIn');

        skateboard.classList.remove('skateOff');

        x.classList.remove('xslide');

    }

})



    @keyframes skateOff{

    0%{

        transform:rotate(0);

    }

    50%{

        transform:rotate(49deg);

    }

    100%{

        transform: translateX(-300px);

    }

}



.skateOff{

    animation: skateOff  ease-in 1s forwards;

}



.x{

    visibility: hidden;

}



.xslide{

    animation:slideOut .8s ease 2s forwards;

}





.menu{

    visibility: hidden;

    color:black;

    width:10em;

    background-color:white;

    border-radius: 4px;

    font-family: 'Raleway';

    background: linear-gradient(to right,

    rgba(249,107,142,1),

    rgba(218,103,230,1),

    rgba(130,125,253,1));

}

.slideOut{

    animation: slideOut 1s forwards 1.2s;

}



@keyframes slideOut{

    0%{

        transform: translateX(-50%);

    }



    100%{

        visibility: visible;

        transform: translateX(0);

    }

}



.slideIn{

    animation: slideIn 2s ease forwards;



}



@keyframes slideIn{

    0%{

        visibility: visible;

        transform: translateX(0);

    }



    100%{

        transform: translateX(-150%);

    }

}

The functionality of the JS is this,
when "skateboard" is clicked, it animates out, to the left and is no longer visible (the skateOff keyframes makes that happen, and i added a class that has that animation implemented also called ".skateOff")

(would it be better to not have a separate class and just add

skateboard.style.animation="animation: skateOff ease-in 1s forwards"?)

..anyway
then after "skateboard" animates out the "navigation"(which is a sidebar menu) adds the "slideOut" class which makes it slide out from the left, along with this the "X" to close the menu slide out, when that is clicked the "navigation"'s class of "slideOut" gets removed and the class of "slideIn" gets added.

This way of doing things seems inefficient, and like a lot of code, I was wondering if there's a simpler way of doing this? Toggling maybe? I've looked into toggling but i'm not sure it will work since the "navigation" element's initial state doesn't have the "slideIn" or "slideOut" class.

ANY tips will be greatly appreciated, thank you for reading and have a great day.

first of all, welcome on Stack Overflow :)

Your code may benefit from classList.toggle (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).

You can have conditional statements there, meaning classList.toggle("string", boolean), like this:

icons.addEventListener('click', (e)=> {

  const isSkate = e.target.className === "skate"; // this could also be altered using classList.contains()



  navigation.classList.toggle('slideIn', !isSkate);

  navigation.classList.toggle('slideOut', isSkate);

  skateboard.classList.toggle('skateOff', isSkate);

  x.classList.toggle('xslide', isSkate);

});

A little PoC can be found here: https://codepen.io/tomekbuszewski/pen/XyNzqG

If you need more help, please post your code to CodePen or JSFiddle, it would be easier to discuss then.