title: Problema de transición
body: <p>I have a problem when it comes to making a transition for a design that I am taking as a basis for a project.
  The problem is that, when I press the register button, it should show the registration section by means of a scroll to the left and it does not do so.</p>
  <p>I want to know how I could fix the problem and know if it is any error in the id .</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const signUpButton = document.getElementById('signUp');
  const logInButton = document.getElementById('logIn');
  const container = document.getElementById('container');
  
  signUpButton.addEventListener('click',()=&gt;{
      container.classList.add('right-panel-active');
  });
  
  logInButton.addEventListener('click', ()=&gt;{
      container.classList.remove('right-panel-active');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap');
  
  *{
      box-sizing: border-box;
  }
  
  body{
      background: #0E1119;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: 'Lobster',cursive;
      height: 100vh;
      margin: -20px 0 50px;
  }
  
  h1{
      font-weight: bold;
      margin: 0;
  }
  
  h2{
      text-align: center;
  }
  
  p{
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 1px;
      margin: 20px 0 30px;
  }
  
  span{
      font-size: 12px;
  }
  
  a{
      color: #333;
      font-size: 14px;
      text-decoration: none;
      margin: 15px 0;
  }
  
  button{
      border-radius: 20px;
      border: none;
      background-color: #3F2EFF;
      color: white;
      font-size: 12px;
      font-weight: bold;
      padding: 12px 45px;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: transform 80ms ease-in;
  }
  
  button:active{
      transform: scale(0.95);
  }
  
  button:focus{
      outline: none;
  }
  
  button.ghost{
      background-color: transparent;
      border: 1px solid white;
      transition: 0.5s;
  }
  
  button.ghost:hover{
      background-color: white;
      color: #0E1119;
      cursor: pointer;
  }
  
  form{
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 50px;
      height: 100%;
      text-align: center;
  }
  
  
  input{
      background: #eee;
      border: none;
      padding: 12px 15px;
      margin: 8px 0;
      width: 100%;
  }
  
  .container{
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
      position: relative;
      overflow: hidden;
      width: 768px;
      max-width: 100%;
      min-height: 480px;
  }
  
  .form-container{
      position: absolute;
      top: 0;
      height: 100%;
      transition: all 0.6s ease-in-out;
  }
  
  .log-in-container{
      left: 0;
      width: 50%;
      z-index: 2;
  
  }
  
  .container.right-panel-active.log-in-container{
      transform: translateX(100%);
  }
  
  .sign-up-container{
      left: 0;
      width: 50%;
      opacity: 0;
      z-index: 1;
  }
  
  .container.right-panel-active.sign-up-container{
      transform: translateX(100%);
      opacity: 1;
      z-index: 5;
      animation: show 0.6s;
  }
  
  @keyframes show {
  
      0%,
      49.99%{
          opacity: 0;
          z-index: 1;
      }
  
      50%,
      100%{
          opacity: 1;
          z-index: 5;
      }
  
  }
  
  .overlay-container{
      position: absolute;
      top: 0;
      left: 50%;
      width: 50%;
      height: 100%;
      overflow: hidden;
      transition: transform 0.6s ease-in-out;
      z-index: 100;
  }
  
  .container.right-panel-active.overlay-container{
      transform: translateX(-100%);
  }
  
  .overlay{
      background: #FF416C;
      background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0 0;
      color: #000000;
      position: relative;
      left: -100%;
      height: 100%;
      width: 200%;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
  }
  
  .container.right-panel-active.overlay{
      transform: translateX(50%);
  }
  
  .overlay-panel{
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 40px;
      text-align: center;
      top: 0;
      height: 100%;
      width: 50%;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
  }
  
  .overlay-left{
      transform: translateX(-20%);
  }
  
  .container.right-panel-active.overlay-left{
      transform: translateX(0);
  }
  .overlay-right{
      right: 0;
      transform: translateX(0);
  }
  
  .container.right-panel-active.overlay-right{
      transform: translateX(20%);
  }
  .social-container{
      margin: 20px 0;
  }
  
  .social-container a{
      border: 1px solid #1a9889;
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      height: 40px;
      width: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Login&lt;/title&gt;
      &lt;link rel="stylesheet" href="styLogin.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container" id="container"&gt;
  
      &lt;div class="form-container sign-up-container"&gt;
          &lt;form action="#"&gt;
              &lt;h1&gt;Crear cuenta&lt;/h1&gt;
              &lt;div class="social-container"&gt;
                  &lt;a href="#" class="social"&gt; &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="social"&gt; &lt;i class="fab fa-google-plus-g"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="social"&gt; &lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;span&gt;Usa tu correo para registrarte&lt;/span&gt;
              &lt;input type="text" placeholder="Nombre"/&gt;
              &lt;input type="email" placeholder="Correo"/&gt;
              &lt;input type="password" placeholder="Contraseña"/&gt;
              &lt;button id="btnR"&gt;Registrarme&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  
  
      &lt;div class="form-container log-in-container"&gt;
          &lt;form action="#"&gt;
              &lt;h1&gt;Iniciar Sesión&lt;/h1&gt;
  
              &lt;div class="social-container"&gt;
                  &lt;a href="#" class="social"&gt; &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="social"&gt; &lt;i class="fab fa-google-plus-g"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="social"&gt; &lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;span&gt;Usar cuenta&lt;/span&gt;
              &lt;input type="email" placeholder="Correo"/&gt;
              &lt;input type="password" placeholder="Contraseña"/&gt;
              &lt;a href="#"&gt;¿Olvidaste tu contraseña? &lt;/a&gt;
              &lt;button&gt;Iniciar sesión&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  
  
      &lt;div class="overlay-container"&gt;
  
          &lt;div class="overlay"&gt;
              &lt;div class="overlay-panel overlay-left"&gt;
                  &lt;h1&gt;¡Bienvenido de nuevo!&lt;/h1&gt;
                  &lt;p&gt;¿Ya tienes una cuenta? Inicia sesión&lt;/p&gt;
                  &lt;button class="ghost" id="logIn"&gt;Iniciar sesión&lt;/button&gt;
  
              &lt;/div&gt;
  
              &lt;div class="overlay-panel overlay-right"&gt;
                  &lt;h1&gt;¡Ey hola!&lt;/h1&gt;
                  &lt;p&gt;¿No tienes una cuenta? ¡Crea una gratis!&lt;/p&gt;
                  &lt;button class="ghost" id="signUp"&gt;Registrarme&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="log.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  
  
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>