How to create an animated login register web page with HTML, CSS, and javascript

Animation in web design is very popular nowadays. Using animation in your UI design gives your site a wow factor that excites your users. It also improves the usability of the site if done right.

Login and registration screens are usually dull and one dimensional so that gave me the motivation to create a tutorial on how to spice things up using CSS and javascript based animation.

Here is the full video :

The tutorial takes you through the steps to create a colorfully vibrant login registration web page. The design of the page is shown below :

The design can be broken down into a grid like layout with reference to the html elements that we would need to achieve that layout as shown below:

From the above we can code a skeleton layout in html as below :

<div class="container">
        <div class="login-register-wrapper">
            <div class="nav-buttons">
                <button id="loginBtn" class="active">Login</button>
                <button id="registerBtn">Register</button>
            </div>
            <div class="form-group">
                <form action="" id="loginform">
                </form>
                <form action="" id="registerform">    
                </form>
            </div>
            <div id="forgot-panel">
            </div>
        </div>
    </div>

Then we fill in the blanks and sprinkle some css magic to get the desired look and feel. The natural order of forms would be that they are stacked vertically, we need to give the registration form specific left, top values so that the registration form sits on the right hand side of login form. We need it on the right hand side so that we can animate it sliding horizontally left to right. We also apply some positional value to the forgot-panel section.

The mechanics of the animations will will be activated by clicking on the buttons under the "nav-buttons" section", when this is clicked we have some javascript code that changes the left positional values of the forms. We also toggle the opacity values so that the form in focus is visible and the other form is invisible with opacity zero. Below is the javscript that assigns the click event and changes the css values for the animation to work:

<script>
        // Grab dom elements from html layout 
        var loginForm=document.getElementById("loginform-wrapper");
        var registerForm=document.getElementById("registerform");
        var loginBtn=document.getElementById("loginBtn");
        var registerBtn=document.getElementById("registerBtn");
        var forgot= document.getElementById("forgot-panel");

        //Registration button is clicked
        registerBtn.onclick=function() { 
            //Change css properties
            loginForm.style.left="-430px";
            loginForm.style.opacity="0";
            forgot.style.left = "-430px";
            forgot.style.opacity = '0';
            registerForm.style.left= "0px";
            registerForm.style.opacity="1";
            loginBtn.classList.remove("active");
            registerBtn.classList.add("active");               
            }
         //login button is clicked
        loginBtn.onclick=function() {
            //Change css propertie
            loginForm.style.left="0px";
            loginForm.style.opacity="1";
            forgot.style.left = "0px";
            forgot.style.opacity = '1';
            registerForm.style.left = "430px";
            registerForm.style.opacity = "0";
            loginBtn.classList.add("active");
            registerBtn.classList.remove("active");    

        }

    </script>

the final piece of magic to apply is to add the transition property "transition: all .5s ease;" to anything that you want animated: In my case to animate the forms when position changes, I just added the following to the form and forgot-panel elements:

form, #forgot-panel { 

       transition: all .5s ease;

}

Conclusion

There are many ways to do animation, the approach I took here is more javascript centric, but you could equally have all the property changes happen in the css and have javascript toggle between different classes as opposed changing the css properties via javascript. The advantage of using javascript is that you have more control over the timing, sequencing, and flow of the animation. So hope you enjoyed the tutorial. PS. You can get the full code here on github