CSS Form Animations

css-form-animations.markdown

CSS Form Animations

Recreated an effect from https://tympanus.net/Development/TextInputEffects/index2.html as practice.

A Pen by Álvaro on CodePen.

License.

index.html

<form>
	
	<div class="form-group">
		<input type="text" name="name" />
		<label>
    	<span>Name</span>
    </label>
	</div>
	
	<div class="form-group">
		<input type="text" name="email" />
		<label>
    	<span>Email</span>
    </label>
	</div>
	
	<div class="form-group">
		<input type="text" name="phone" />
		<label>
    	<span>Phone</span>
    </label>
	</div>
	
</form>

script.js

var FormAnimations = {

    form: document.querySelector('form'),
    labels: document.querySelectorAll('form input'),

    init: function() {

        var me = this;

        if ( this.form !== null ) {
            this.labels.forEach(function(obj) {
                obj.addEventListener('focus', me.animateIn);
                obj.addEventListener('blur', me.animateOut);
            });
        }

    },

    animateIn: function() {
        this.parentElement.classList.add('active');
    },

    animateOut: function() {
        if ( this.value.length === 0 ) {
            this.parentElement.classList.remove('active');
        }
    }

};
FormAnimations.init();

style.scss

@import 'compass';
@import url('https://fonts.googleapis.com/css?family=Lato');
$gutter: 18px;
$sasha: #333;

* {
	box-sizing: border-box;
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	background: #f6f6f6;
}

form {
	width: 350px;
	margin: 45px auto;
  .form-group {
    position: relative;
    width: 100%;
    margin-bottom: $gutter*2;
    overflow: hidden;
    &.active {
      input[type='text'] {
        color: #fff;
      }
      label {
        @include transform(translate3d(0, 0, 0));
        span {
          @include transform(scale(.85));
        }
      }
    }
  }
  input[type='text'] {
    position: relative;
    display: block;
    width: 100%;
    padding: $gutter*.75 $gutter;
    color: $sasha;
		font-size: 1em;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid $sasha;
    z-index: 2;
    &:focus {
      outline: none;
    }
  }
  label {
    position: relative;
    @include transform(translate3d(0, -100%, 0));
    @include transition(font-size .2s cubic-bezier(.83,0,.6,1), transform .2s cubic-bezier(.83,0,.6,1));
    display: block;
    padding: $gutter*.75 0;
    font-size: 1.25em;
    z-index: 1;
    span {
      position: relative;
      display: inline-block;
      @include transform(scale(1));
      @include transition(transform .2s cubic-bezier(.83,0,.6,1));
      z-index: 2;
    }
    &:before {
      position: absolute;
      top: 0;
      @include transform(translate3d(0, -100%, 0));
      @include transition(transform .2s cubic-bezier(.83,0,.6,1));
      display: block;
      width: 100%;
      height: 100%;
      background: $sasha;
      content: '';
    }
  }
}