Over The Top Form

index.html

<header class="codrops-header">
  <h1>Over The Top.</h1>

</header>
<span class="thanks">Thank you !</span>
<i class="fa fa-heart"></i>

<div class="container">
  <section class="content">
    <span class="input input-1 input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-10">
					<label class="input__label input__label--jiro" for="input-10">
						<span class="input__label-content input__label-content--jiro">Your name goes here</span>
    </label>
    <i class="fa fa-thumbs-up"></i>
    </span>
    <span class="input input-2 input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-11">
					<label class="input__label input__label--jiro" for="input-11">
						<span class="input__label-content input__label-content--jiro">What about your age ?</span>
    </label>
    <i class="fa fa-thumbs-up"></i>
    </span>
    <span class="input input-3 input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-12">
					<label class="input__label input__label--jiro" for="input-12">
						<span class="input__label-content input__label-content--jiro">We also need your email</span>
    </label>
    <i class="fa fa-thumbs-up"></i>
    </span>
  </section>
</div>

Over The Top Form.markdown

Over The Top Form

A ridiculous form made with GSAP

A Pen by Antonin Cezard on CodePen.

License.

script.js

var $inputs = $('input');

$('.input-1').on('change', function() {
  var tl = new TimelineLite();
  var $self = $(this);
  tl.to($self.find('.fa'), 0.4, {
    right: '5px',
    opacity: 1,
    ease: Elastic.easeOut
  }).to($(this), 0.4, {
    left: "-450px",
    rotation: -220,
    opacity: 0,
    y: '-100',
    ease: Power1.easeOut
  }).to($self.next(), 0.4, {
    top: "-140px",
    opacity: 1,
    ease: Back.easeOut
  }).to($('.container'), 0.4, {
    backgroundColor: '#FFA153',
    ease: Power1.easeOut
  }, '-=0.4').to($('html'), 0.4, {
    backgroundColor: '#FFCEA6',
    ease: Power1.easeOut
  }, '-=0.4');

  setTimeout(function() {
    $self.next().find('input').focus();
  }, 1200)

})
$('.input-2').on('change', function() {
  var tl = new TimelineLite();
  var $self = $(this);
  tl.to($self.find('.fa'), 0.4, {
    right: '5px',
     opacity: 1,
    ease: Elastic.easeOut
  }).to($(this), 0.4, {
    left: "450px",
    rotation: 255,
    opacity: 0,
    y: "100",
    ease: Power1.easeOut
  }).to($self.next(), 0.4, {
    top: "-=140px",
    opacity: 1,
    ease: Back.easeOut
  }).to($('.container'), 0.4, {
    backgroundColor: '#48DC48',
    ease: Power1.easeOut
  }, '-=0.4').to($('html'), 0.4, {
    backgroundColor: '#9DF39D',
    ease: Power1.easeOut
  }, '-=0.4');
  setTimeout(function() {
    $self.next().find('input').focus();
  }, 1200)
})
$('.input-3').on('change', function() {
  var tl = new TimelineLite();
  var $self = $(this);
  tl.to($self.find('.fa'), 0.4, {
    right: '5px',
     opacity: 1,
    ease: Elastic.easeOut
  }).to($(this), 0.4, {
    top: "-=450px",
    rotation: 255,
    opacity: 0,
    y: "-100",
    ease: Power1.easeOut
  }).to($('.container'), 0.4, {
    backgroundColor: '#333333',
    ease: Power1.easeOut
  }, '-=0.4').to($('html'), 0.4, {
    backgroundColor: '#999999',
    ease: Power1.easeOut
  }, '-=0.4').to($('.thanks'), 0.4, {
    left: 200,
    opacity: 1,
    ease: Power4.easeOut
  }).to($('.fa-heart'), 0.4, {
    right: -210,
    opacity: 1,
    ease: Power4.easeOut
  }, '-=0.4')
});

scripts

<script src="http://tympanus.net/Development/TextInputEffects/js/classie.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

style.css

html {
background: #FFA6A6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
 
header {

  top: 10px!important;
  margin: 0!important;
  padding:0!important;
}

body {
  background: transparent;
}
  
.container {
  background: #FF3131;
  width: 800px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0px 7px 31px -2px rgba(0,0,0,0.75);
  overflow: visible;
  position:relative;
}
.container input {
   background: #fff;
}
   
.input__label-content {
   color: #fff;

}

.input {
  z-index:666;
  &:nth-child(2),
  &:nth-child(3) {
    opacity: 0;
  }
  &:nth-child(3) {
    top: -140px;
  }
}

.fa-thumbs-up {
  transform: scaleX(-1);
  position: absolute;
  right: -100%;
      font-size: 3.5rem;
    padding-top: 10px;
  opacity:0;
}

.input-1 {
  background: #EC0505;
  .fa {
    color: #EC0505;
  }
  input {
    color: #EC0505;
  }
}
.input-2 {
  background: #EC6E05;
    .fa {
    color: #EC6E05;
  }
    input {
    color: #EC6E05;
  }
}
.input-3 {
  background: #04BC04;
    .fa {
    color: #04BC04;
  }
    input {
    color: #04BC04;
  }
}
.thanks {
 
  font-size: 3rem;
  position: relative;
  left:-260px;
    top: 170px;
  color: #fff;
    z-index:420;
  opacity:0;
}
.fa-heart {

  font-size: 3rem;
   position: relative;
   right:-550px;
    top: 170px;
  z-index:200;
  opacity: 0;
  color: #fff
}

styles

<link href="http://tympanus.net/Development/TextInputEffects/css/set2.css" rel="stylesheet" />
<link href="http://tympanus.net/Development/TextInputEffects/css/set1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:200,500,700,800" rel="stylesheet" />
<link href="http://tympanus.net/Development/TextInputEffects/css/demo.css" rel="stylesheet" />
<link href="http://tympanus.net/Development/TextInputEffects/css/normalize.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />