Animated Login & Signup Form Using HTML, CSS & JavaScript

Learn how to create an Responsive animated login and signup form using HTML, CSS, and JavaScript.

Animated Login & Signup Form Using HTML, CSS & JavaScript

This Animated Login & Signup Form is built using HTML, CSS, and JavaScript to create a modern authentication interface with smooth sliding transitions. The design allows users to switch between login and registration forms without reloading the page, providing a seamless and interactive user experience.

The project uses CSS animations and JavaScript functionality to create an elegant sliding effect between the sign-in and sign-up sections. The layout is fully responsive, ensuring that the form works perfectly across desktops, tablets, and mobile devices while maintaining a clean and professional appearance.

Steps to Create an Animated Login & Signup Form

Follow these simple steps to build a sliding login and registration form:

Create a project folder, for example, animated-login-signup-form.
Inside the folder, create three files: index.html, style.css, and script.js.
Design the login and signup form structure using HTML.

                            
                                <!doctype html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->


<html lang="en">

<head>
    <title>Login & Sign up Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="index.css">

</head>

<body>


    <div class="container  p-4">
        <div class="row main mt-5">

            <!-- sign up form -->
            <div class="col-md-6 p-5 " id="signUp">
                <h1 class="display-4 text-center ">Sign up</h1>
                <form class="d-flex justify-content-center mt-4">
                    <div class="w-75 ">
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="email">
                        </div>
                        <div class="form-group my-4">
                            <label for="">Password</label>
                            <input type="password">
                        </div>
                        <button type="submit">Register</button>
                        <div class="d-flex justify-content-between mt-5">
                            <a class="links" href="#" id="loginLink">Already have an Account ?</a>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Login Form  -->
            
            <div class="col-md-6 p-5 " id="login">
                <h1 class="display-4 text-center ">Login</h1>
                <form class="d-flex justify-content-center mt-4">
                    <div class="w-75 ">
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="email">
                        </div>
                        <div class="form-group my-4">
                            <label for="">Password</label>
                            <input type="password">
                        </div>
                        <button type="submit">Login</button>
                        <div class="d-flex justify-content-between mt-5">
                            <a class="links" href="#" id="registerLink">Create an Account ?</a>
                            <a class="links" href="#" >forget Password ?</a>
                        </div>
                    </div>
                </form>
            </div>
            <div  id="overlay">

            </div>
        </div>

    </div>



    <script src="index.js"></script>

</body>
</html>

Apply custom CSS styling to create the layout and animation effects.

                            
                                body {
    background-color: #4158D0;
    background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    background-size: 100% 100%;
}
.main {
    background-color: rgba(255, 255, 255, 0.219);
    backdrop-filter: blur(2px);
    border-radius: 25px;
}
input {
    outline: none;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid dodgerblue;
    width: 100%;
    position: relative;
    bottom: 0px;
}
.form-group {
    height: 70px;
}

label {
    position: relative;
    font-size: 18px;
    color: rgb(58, 58, 58);
    top: 32px;
    left: 5px;
    transition: .3s;
    z-index: -1;
}

.label-selected {
    position: relative;
    font-size: 13px;
    color: rgb(82, 82, 82);
    top: 5px;
    left: 5px;
}

button {
    border: none;
    background-color: dodgerblue;
    color: #fff;
    font-weight: 500;
    padding: 10px;
    width: 100px;
    border-radius: 30px;
    margin-left: 75%;
    transition: .5s;
    transform: translate(0px, 0px);
}

button:hover {
    box-shadow: 0px 8px 15px -10px rgb(61, 61, 61);
    transform: translate(0px, -3px);
}

.links {
    font-size: 14px;
    color: rgb(3, 48, 197);
}

#overlay {
    background-color: #fff;
    height: 550px;
    width: 600px;
    position: absolute;
    transform: translate(0px, -25px);
    border-radius: 25px;
    background-image: url(bg2.jpg);
    transition: .5s;
}

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
    #overlay ,#signUp{
        display: none;
    }
    button{
    margin-left: 65%;

    }
}

Add JavaScript functionality to switch between the login and signup sections. Save the files and open the project in a browser to test the animated form.

                            
                                document.querySelectorAll('input').forEach((item) => {
    item.addEventListener("focus", function () {
        item.previousElementSibling.className = 'label-selected';
    })
    item.addEventListener("blur", function () {
        console.log(item.value);
        if (item.value === '') {
            item.previousElementSibling.className = '';
        }
    })
})

document.getElementById("registerLink").addEventListener("click", function () {
    if (window.innerWidth < 600) {
        document.getElementById("signUp").style.display = 'block';
        document.getElementById("login").style.display = 'none';
    }
    else {
        document.getElementById("overlay").style.transform = 'translate(550px , -25px)';
    }
})
document.getElementById("loginLink").addEventListener("click", function () {
    if (window.innerWidth < 600) {
        document.getElementById("login").style.display = 'block';
        document.getElementById("signUp").style.display = 'none';
    }
    else {
        document.getElementById("overlay").style.transform = 'translate(0px , -25px)';
    }
})

Download Code Files