Sign Up and Login

Sign Up and Login animated transition with pure js and Green Sock TweenMax inspirated by: https://dribbble.com/shots/2311260-Day-1-Sign-Up-and-Login-Animated-Download-Template

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="logincont">
    <div class="left">
        <h3>Have an account?</h3>
        <p>Log in with your username and password.</p>
        <a id="left">Log in</a>
    </div>
    <div class="right">
        <h3>Don't have an account?</h3>
        <p>Its only takes few minutes to make one.</p>
        <a id="right">Register</a>
    </div>
    <div id="panel" class="panel">
        <div id="login">
             <form>
              <h2>Log in</h2>
              <input type="text" name="fname" placeholder="User name">
              <input type="password" name="password" placeholder="Password">
              <a class="forgetbtn">Forget password?</a>
              <a class="btn">Log in</a>
            </form> 
        </div>
        <div id="signup">
            <form>
              <h2>Register</h2>
              <input type="text" name="fname" placeholder="User name">
              <input type="password" name="password" placeholder="Password">
              <input type="text" name="email" placeholder="Email address">
              <a class="btn">Register</a>
            </form> 
        </div>
    </div>
</div>

CSS

html, body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 440px;
}
body{
    background-image: url("http://www.wallcoo.net/nature/snow_mountain/images/%5Bwallcoo%5D_snow_mountain_Image_AP29098.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: arial;
}
.logincont{
    width: 350px;
    height: 200px;
    display: block;
    background-color: rgba(65, 65, 65, 0.59);
    margin: 0 auto;
    margin-top: 70px;
    position: relative;
}
.logincont .left, .logincont .right{
    float: left;
    width: 145px;
    padding: 0 15px;
    color: #ffffff;
    height: 100%;
}
.logincont .left h3, .logincont .right h3{
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 10px;
}
.logincont .left a, .logincont .right a{
    border: 1px solid #ffffff;
    border-radius: 3px;
    display: inline-block;
    padding: 4px 10px;
    transition: all 400ms ease-in-out;
}
.logincont .left a:hover, .logincont .right a:hover{
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}
.panel{
    height: 160px;
    width: 120px;
    padding: 30px 15px;
    position: absolute;
    top: -10px;
    left: 15px;
    background-color: #ffffff;
}
.panel h2{
    margin-top: -5px;
    margin-bottom: 10px;
    color: #E65544;
    font-size: 22px;
}
.forgetbtn{
    display: block;
    font-size: 10px;
    margin-bottom: 26px;
    margin-top: -5px;
    color: #757575;
}
.forgetbtn:hover{
    text-decoration: underline; 
    cursor: pointer;
}
.panel a.btn{
    border: 1px solid #E65544;
    color: #E65544;
    border-radius: 3px;
    display: inline-block;
    padding: 4px 10px;
    transition: all 400ms ease-in-out;
    margin-top: 5px;
}
.panel a.btn:hover{
    color: #ffffff;
    background-color: #E65544;
    cursor: pointer;
}
.panel input{
    margin-bottom: 15px;
    display: block;
    width: 114px;
    border: 0px;
    border-bottom: 1px solid #c0c0c0;
    transition: all 400ms ease-in-out;
}
.panel...

JavaScript

document.getElementById("right").onclick=function(){
	TweenMax.to(".panel",1.4,{
    	x: 170,
    	ease: Elastic. easeOut.config( 0.7, 0.5)
	});
    document.getElementById("login").style.display = "none";
    document.getElementById("signup").style.display = "block";  
};
document.getElementById("left").onclick=function(){
	TweenMax.to(".panel",1.4,{
    	x: 0,
    	ease: Elastic. easeOut.config( 0.7, 0.5)
	});
    document.getElementById("login").style.display = "block";
    document.getElementById("signup").style.display = "none";
};