Smooth sliding login form animation | HTML, CSS & JavaScript

<div class="wrap" id="w">
    
    <div class="forms">
        
        <div class="pane">
            <h2>Welcome Back</h2>
            <p>Log in to access your dashboard</p>
            
            <div class="input-group">
                <input type="email" id="log-email" placeholder=" " required>
                <label for="log-email">Email Address</label>
            </div>
            <div class="input-group">
                <input type="password" id="log-pass" placeholder=" " required>
                <label for="log-pass">Password</label>
            </div>
            
            <button class="btn-submit">Sign In</button>
        </div>

<div class="pane">
            <h2>Create Account</h2>
            <p>Start your journey with us today</p>
            
            <div class="input-group">
                <input type="text" id="reg-name" placeholder=" " required>
                <label for="reg-name">Full Name</label>
            </div>
            <div class="input-group">
                <input type="email" id="reg-email" placeholder=" " required>
                <label for="reg-email">Email Address</label>
            </div>
            <div class="input-group">
                <input type="password" id="reg-pass" placeholder=" " required>
                <label for="reg-pass">Password</label>
            </div>
            
            <button class="btn-submit">Sign Up</button>
        </div>

</div>

<div class="slider">
        
        <div class="slider-content slider-left">
            <h1>One of us?</h1>
            <p>If you already have an account, just sign in to pick up where you left off.</p>
            <button class="btn-outline" onclick="toggleWrap()">Sign In</button>
        </div>
        
        
        <div class="slider-content slider-right">
            <h1>New Here?</h1>
            <p>Sign up and discover a great amount of new opportunities waiting for you.</p>
            <button class="btn-outline" onclick="toggleWrap()">Sign Up</button>
        </div>
    </div>

</div>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Outfit', sans-serif;
            height: 100vh;
            display: grid;
            place-items: center;
            background: #0b1120;
            overflow: hidden;
            color: #fff;
			scale:.6;
        }

/* Ambient Animated Orbs */
        body::before, body::after {
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            filter: blur(90px);
            z-index: -1;
            animation: float 12s infinite alternate ease-in-out;
        }

body::before {
            background: #7c3aed;
            top: -150px;
            left: -100px;
        }

body::after {
            background: #06b6d4;
            bottom: -150px;
            right: -100px;
            animation-delay: -6s;
        }

@keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(100px, 80px) scale(1.2); }
        }

/* Main Container */
        .wrap {
            width: 960px;
            max-width: 95%;
            height: 580px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 32px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        }

/* Background Forms Container */
        .forms {
            display: flex;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

.pane {
            width: 50%;
            padding: 60px 70px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.pane h2 {
            font-size: 2.2rem;
            margin-bottom: 8px;
            font-weight: 600;
        }

.pane p {
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 30px;
            font-size: 0.95rem;
        }

/* Inputs */
        .input-group {
            position: relative;
            margin-bottom: 20px;
        }

input {
            width: 100%;
            padding: 16px 20px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s ease;
            outline: none;
        }

input::placeholder {
            color: transparent; /* Hidden for floating label effect */
        }

.input-group label {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            transition: 0.3s ease;
        }

input:focus, input:not(:placeholder-shown) {
            border-color: #06b6d4;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
        }

input:focus ~ label, input:not(:placeholder-shown) ~ label {
            top: -10px;
            left: 15px;
            font-size: 0.8rem;
            color: #06b6d4;
            background: #0f1525;
            padding: 0 8px;
            border-radius: 4px;
        }

/* Buttons */
        .btn-submit {
            padding: 16px;
            margin-top: 10px;
            border: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, #7c3aed, #06b6d4);
            color: #fff;
            font-size: 1.05rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
        }

.btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(6, 182, 212, 0.4);
        }

/* Sliding Overlay */
        .slider {
            position: absolute;
            top: 0;
            left: 50%;
            width: 50%;
            height: 100%;
            background: linear-gradient(135deg, #7c3aed, #06b6d4);
            transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
            z-index: 10;
            box-shadow: -15px 0 40px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

.wrap.active .slider {
            transform: translateX(-100%);
            box-shadow: 15px 0 40px rgba(0, 0, 0, 0.3);
        }

/* Overlay Inner Content */
        .slider-content {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 50px;
            transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease;
        }

.slider-content h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            font-weight: 600;
        }

.slider-content p {
            font-size: 1.1rem;
            margin-bottom: 40px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.9);
        }

.btn-outline {
            padding: 14px 45px;
            background: transparent;
            border: 2px solid #fff;
            border-radius: 30px;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: 0.3s;
        }

.btn-outline:hover {
            background: #fff;
            color: #7c3aed;
        }

/* Dynamic Panel Switching */
        .slider-left {
            transform: translateX(-100%);
            opacity: 0;
            pointer-events: none;
        }

.slider-right {
            transform: translateX(0);
            opacity: 1;
            pointer-events: all;
        }

.wrap.active .slider-left {
            transform: translateX(0);
            opacity: 1;
            pointer-events: all;
        }

.wrap.active .slider-right {
            transform: translateX(100%);
            opacity: 0;
            pointer-events: none;
        }

/* Responsive padding for smaller screens */
        @media (max-width: 768px) {
            .pane { padding: 40px 30px; }
            .slider-content { padding: 0 30px; }
            .slider-content h1 { font-size: 2rem; }
        }

- Smooth sliding login form animation

Live Preview