Animated Login and Sign up

animated-login-and-sign-up.markdown

Animated Login and Sign up

Animated Login and Sign Up. This Pen is base on the Dribbble shot made by Deepak Yadav that you can find here: https://goo.gl/XRALsw

A Pen by Viwe on CodePen.

License.

index.html

<!--
  This was created based on the Dribble shot by Deepak Yadav that you can find at https://goo.gl/XRALsw
  I am @hurickkrugner on Twitter or @hk95 on GitHub. Feel free to message me anytime.

  TODO (04/12/2017):
  - Add icons (.svg) to the form fileds (email, password, etc);
  - Add and review responsive styles;
-->

<section class="user">
  <div class="user_options-container">
    <div class="user_options-text">
      <div class="user_options-unregistered">
        <h2 class="user_unregistered-title">Don't have an account?</h2>
        <p class="user_unregistered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
        <button class="user_unregistered-signup" id="signup-button">Sign up</button>
      </div>

      <div class="user_options-registered">
        <h2 class="user_registered-title">Have an account?</h2>
        <p class="user_registered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
        <button class="user_registered-login" id="login-button">Login</button>
      </div>
    </div>
    
    <div class="user_options-forms" id="user_options-forms">
      <div class="user_forms-login">
        <h2 class="forms_title">Login</h2>
        <form class="forms_form">
          <fieldset class="forms_fieldset">
            <div class="forms_field">
              <input type="email" placeholder="Email" class="forms_field-input" required autofocus />
            </div>
            <div class="forms_field">
              <input type="password" placeholder="Password" class="forms_field-input" required />
            </div>
          </fieldset>
          <div class="forms_buttons">
            <button type="button" class="forms_buttons-forgot">Forgot password?</button>
            <input type="submit" value="Log In" class="forms_buttons-action">
          </div>
        </form>
      </div>
      <div class="user_forms-signup">
        <h2 class="forms_title">Sign Up</h2>
        <form class="forms_form">
          <fieldset class="forms_fieldset">
            <div class="forms_field">
              <input type="text" placeholder="Full Name" class="forms_field-input" required />
            </div>
            <div class="forms_field">
              <input type="email" placeholder="Email" class="forms_field-input" required />
            </div>
            <div class="forms_field">
              <input type="password" placeholder="Password" class="forms_field-input" required />
            </div>
          </fieldset>
          <div class="forms_buttons">
            <input type="submit" value="Sign up" class="forms_buttons-action">
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

script.js

// Variables
var signupButton = document.getElementById('signup-button'),
    loginButton = document.getElementById('login-button'),
    userForms = document.getElementById('user_options-forms')


// Add event listener to the "Sign Up" button
signupButton.addEventListener('click', () => {
  userForms.classList.remove('login-click')
  userForms.classList.add('signup-click')
}, false)


// Add event listener to the "Login" button
loginButton.addEventListener('click', () => {
  userForms.classList.remove('signup-click')
  userForms.classList.add('login-click')
}, false)

style.sass

/* General variables */
$bdrds: 3px

$white: #fff
$black: #000
$gray: #ccc
$salmon: #e8716d
$smoky-black: rgba(#222222, .85)

$ff: 'Montserrat', sans-serif
$ff-body: 12px
$ff-light: 300
$ff-regular: 400
$ff-medium: 500


/* General configurations */
*
  box-sizing: border-box

body
  font-family: $ff
  font-size: $ff-body
  line-height: 1em
  
button
  background-color: transparent
  padding: 0
  border: 0
  outline: 0
  cursor: pointer
  
input
  background-color: transparent
  padding: 0
  border: 0
  outline: 0
  
  &[type="submit"]
    cursor: pointer
    
  &::placeholder
    font-size: .85rem
    font-family: $ff
    font-weight: $ff-light
    letter-spacing: .1rem
    color: $gray

    
/* Animations */
@keyframes bounceLeft
  0%
    transform: translate3d(100%, -50%, 0)
  
  50%
    transform: translate3d(-30px, -50%, 0)
  
  100%
    transform: translate3d(0, -50%, 0)

  
@keyframes bounceRight
  0%
    transform: translate3d(0, -50%, 0)
  
  50%
    transform: translate3d(calc(100% + 30px), -50%, 0)
  
  100%
    transform: translate3d(100%, -50%, 0)


/* Page background */
.user
  display: flex
  justify-content: center
  align-items: center
  
  width: 100%
  height: 100vh
  background: url('https://goo.gl/YRxqs1') no-repeat center
  background-size: cover
  
  &_options-container
    position: relative
    width: 80%
  
  &_options-text
    display: flex
    justify-content: space-between
    width: 100%
    background-color: $smoky-black
    border-radius: $bdrds


/* Registered and Unregistered user box and text */
.user_options-registered,
.user_options-unregistered
  width: 50%
  padding: 75px 45px
  
  color: $white
  font-weight: $ff-light
    
.user_registered-title,
.user_unregistered-title
  margin-bottom: 15px
  font-size: 1.66rem
  line-height: 1em
  
.user_unregistered-text,
.user_registered-text
  font-size: .83rem
  line-height: 1.4em
  
.user_registered-login,
.user_unregistered-signup
  margin-top: 30px
  border: 1px solid $gray
  border-radius: $bdrds
  padding: 10px 30px
  
  color: $white
  text-transform: uppercase
  line-height: 1em
  letter-spacing: .2rem
  
  transition: background-color .2s ease-in-out, color .2s ease-in-out
  
  &:hover
    color: $smoky-black
    background-color: $gray


/* Login and signup forms */
.user_options-forms
  position: absolute
  top: 50%
  left: 30px
  
  width: calc(50% - 30px)
  min-height: 419px
  padding: 70px 40px
  background-color: $white
  border-radius: $bdrds
  box-shadow: 2px 0 15px rgba($black, .25)
  overflow: hidden
  
  transition: transform .4s ease-in-out
  transform: translate3d(100%, -50%, 0)
  
  .user_forms-login
    transition: opacity .4s ease-in-out, visibility .4s ease-in-out
  
  .forms
    &_title
      margin-bottom: 45px

      font-size: 1.5rem
      font-weight: $ff-medium
      line-height: 1em
      text-transform: uppercase
      color: $salmon
      letter-spacing: .1rem
        
    &_field
      &:not(:last-of-type)
        margin-bottom: 20px
    
    &_field-input
      width: 100%
      border-bottom: 1px solid $gray
      padding: 6px 20px 6px 0
      
      font-family: $ff
      font-size: 1rem
      font-weight: $ff-light
      color: darken($gray, 30%)
      letter-spacing: .1rem
      
      transition: border-color .2s ease-in-out
      
      &:focus
        border-color: darken($gray, 30%)
      
    &_buttons
      display: flex
      justify-content: space-between
      align-items: center
      
      margin-top: 35px
      
      &-forgot
        font-family: $ff
        letter-spacing: .1rem
        color: $gray
        
        transition: color .2s ease-in-out
        
        &:hover
          color: darken($gray, 10%)
      
      &-action
        background-color: $salmon
        border-radius: $bdrds
        padding: 10px 35px
        
        font-size: 1rem
        font-family: $ff
        font-weight: $ff-light
        color: $white
        text-transform: uppercase
        letter-spacing: .1rem
          
        transition: background-color .2s ease-in-out
          
        &:hover
          background-color: darken($salmon, 10%)
      
  .user_forms-signup,
  .user_forms-login
    position: absolute
    top: 70px
    left: 40px
    
    width: calc(100% - 80px)
    
    opacity: 0
    visibility: hidden
    transition: opacity .4s ease-in-out, visibility .4s ease-in-out, transform .5s ease-in-out
    
  .user_forms-signup
    transform: translate3d(120px, 0, 0)
    
    .forms_buttons
      justify-content: flex-end
      
  .user_forms-login
    transform: translate3d(0, 0, 0)
    opacity: 1
    visibility: visible


/* Triggers */
.user_options-forms
  &.signup-click
    animation: bounceLeft 1s forwards
    
    .user_forms-signup
      opacity: 1
      visibility: visible
      transform: translate3d(0, 0, 0)
      
    .user_forms-login
      opacity: 0
      visibility: hidden
      transform: translate3d(-120px, 0, 0)
      
  &.login-click
    animation: bounceRight 1s forwards
    
    .user_forms-signup
      opacity: 0
      visibility: hidden
      
    .user_forms-login
      opacity: 1
      visibility: visible
      transform: translate3d(0, 0, 0)