Sliding working not properly. I want it from the left. It comes from the right

This is my start.html:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pepper App</title>
   
   {% load static %}
   <link rel="stylesheet" href="{% static 'css/start.css' %}">
</head>
<body>
   <div class="container">
      <!-- LOGIN Form -->
      <div class="form login-form active" id="loginForm">
         <div class="login-left"></div> <!-- Left section with background -->
         <div class="login-right form-content">
            <h2 class="form-title">Login</h2>
            <form>
               <div class="form-group">
                  <label for="username">Username or Email</label>
                  <input type="text" id="loginUsername" name="username" placeholder="Enter your username or email" required>
               </div>
               <div class="form-group">
                  <label for="password">Password</label>
                  <input type="password" id="password" name="password" placeholder="Enter your password" required>
               </div>
               <button type="submit">Login</button>
            </form>
            <p>Don't have an account? <span onclick="toggleForms()" class="toggle-text">Register</span></p>
         </div>
      </div>

      <!-- SIGNUP Form -->
      <div class="form signup-form" id="signupForm">
         <div class="signup-left form-content">
            <h2 class="form-title">Sign Up</h2>
            <form>
               <div class="form-group">
                  <label for="username">Username</label>
                  <input type="text" id="signupUsername" name="username" placeholder="Enter your username" required>
               </div>
               <div class="form-group">
                  <label for="email">Email</label>
                  <input type="email" id="email" name="email" placeholder="Enter your email" required>
               </div>
               <div class="form-group">
                  <label for="password">Password</label>
                  <input type="password" id="password" name="password" placeholder="Enter your password" required>
               </div>
               <button type="submit">Sign Up</button>
            </form>
            <p>Already have an account? <span onclick="toggleForms()" class="toggle-text">Login</span></p>
         </div>
         <div class="signup-right"></div>
      </div>
   </div>

   <script src="{% static 'js/start.js' %}"></script>
</body>
</html>

this is my start.css:

/* Colors for reference: 9A3B3B, C08261, E2C799, F2ECBE */
body, html {
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #F2ECBE;
  overflow: hidden; 
}

/* Default form styling */
.form {
  display: none; /* Initially hidden */
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position: absolute;
  overflow: hidden; 
  transition: transform 0.6s ease-in-out;
}

/* Show the active form */
.form.active {
  display: flex;
  animation: slide-in 0.6s forwards;
}

.form-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5%;
    width: 100%;
    animation: fade-in 0.6s;
}

/* Left section with background */
.login-left, .signup-right {
  width: 70%;
  background-color: #9A3B3B;
}

/* Right section */
.login-right, .signup-left {
  width: 30%;
  background-color: #F2ECBE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5%;
}
/* Sliding Animation for Forms */
@keyframes slide-in {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

/* Text Animation */
@keyframes fade-out {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-50px); }
}

@keyframes fade-in {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

.form-title, .toggle-text {
  animation: fade-in 0.6s;
}

/* Form elements styling */
.form-group {
  margin-bottom: 15px;
  width: 80%;
  text-align: left;
}

.form-group label, button {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

button {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  color: #F2ECBE;
  background-color: #AD5F4E;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #AD5F4E;
}

.toggle-text {
  color: #AD5F4E;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 10px;
}

/* Slide in SIGNUP from the left */
@keyframes signup-slide-in-from-left {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

/* Slide out SIGNUP to the right */
@keyframes signup-slide-out-to-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Slide in LOGIN from the right */
@keyframes login-slide-in-from-right {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

/* Slide out LOGIN to the left */
@keyframes login-slide-out-to-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Ensure each animation holds its final position */
.form {
  animation-fill-mode: forwards;
}

and this is start.js:

function toggleForms() {
  const loginForm = document.getElementById('loginForm');
  const signupForm = document.getElementById('signupForm');
  const container = document.querySelector('.container');
  const title = document.querySelectorAll('.form-title');
  const toggleText = document.querySelectorAll('.toggle-text');

  if (loginForm.classList.contains('active')) {
      // LOGIN slides out to the left, SIGNUP slides in from the left
      loginForm.style.animation = 'login-slide-out-to-left 0.6s forwards';
      signupForm.style.animation = 'signup-slide-in-from-left 0.6s forwards';
      container.style.backgroundColor="#F2ECBE"; // Green background for this transition
  } else {
      // SIGNUP slides out to the right, LOGIN slides in from the right
      loginForm.style.animation = 'login-slide-in-from-right 0.6s forwards';
      signupForm.style.animation = 'signup-slide-out-to-right 0.6s forwards';
      container.style.backgroundColor="#9A3B3B"; // Blue background for this transition
  }

  // Fade out text
  title.forEach(el => el.style.animation = 'fade-out 0.4s forwards');
  toggleText.forEach(el => el.style.animation = 'fade-out 0.4s forwards');

  setTimeout(() => {
      // Toggle active form
      loginForm.classList.toggle('active');
      signupForm.classList.toggle('active');

      // Reset animations
      loginForm.style.animation = '';
      signupForm.style.animation = '';

      // Fade text back in
      title.forEach(el => el.style.animation = 'fade-in 0.6s forwards');
      toggleText.forEach(el => el.style.animation = 'fade-in 0.6s forwards');
  }, 400);
}

// Initialize the active form on page load
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('loginForm').classList.add('active');
});

When I press Login in Sign up form, it slides to the right, I see #9A3B3B background. And Login slides from the right (outside the monitor). It is correct.

When I press Register in Login form. Login form slides to the left.
I see #F2ECBE background and then SIGNUP forms slides from the right.
But it’s not correct. I want SIGN UP slides from the left outside the monitor.

I prompted to ChatGPT several times, but it can’t solve the issue.
Help me, please, PEOPLE.

You need to sign in to view this answers

Related Post