Why does my navbar slides left 200px more?

Question

I have a Navbar react component. It has a menu button in the navbar, when I click it Menu should slide left. You can see it here:

const [toggleMenu, setToggleMenu] = useState(false);

{toggleMenu ? (
          <FiX
            opacity={0}
            className="navbar__menu-icon"
            color="#fff"
            size={27}
            onClick={() => setToggleMenu(false)}
          />
        ) : (
          <FiAlignRight
            className="navbar__menu-icon"
            color="#fff"
            size={27}
            onClick={() => setToggleMenu(true)}
          />
        )}
        {toggleMenu && (
          <div className="navbar__menu-container slide-left">
            <button className="navbar__menu-container_close">
              <FiX color="#000" size={27} onClick={() => setToggleMenu(false)} />
            </button>
            <div className="navbar__menu-container_links">
              <Menu />
            </div>
            <button className="navbar__menu-container_btn">Get in Touch</button>
          </div>
        )} 

So, when I click FiAlignRight (menu button) navbar__menu container slides left. Slide left animation:

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}

.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
  }

But when I try it, navbar__menu-container slides 200px more than I need Image of website

Why does this happen?

Answer 1

I have the impression that you are thinking that the navbar is sliding in from off the screen, but you have not positioned it off the screen.

Try right: -200px;

.navbar__menu-container {
  right: -200px;
}

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: -200px;
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    
    background-color: aliceblue;
  }
  
body {overflow: hidden}

<div class="navbar__menu-container slide-left">
  <button>Get in Touch</button>
</div>

Or transform from 200px to 0

@keyframes slide-left {
  0% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    
    background-color: aliceblue;
  }
  
body {overflow: hidden}

<div class="navbar__menu-container slide-left">
  <button>Get in Touch</button>
</div>