LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


First try to log with anything to see a failed login…

Now try to log with "john@doe.com" and "test" to see a successful login!

SIGN IN
John... Doe? SIGN IN
CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
input[type=password]::-ms-reveal, input[type=password]::-ms-clear {
  display: none;
}

/* Removing this since I'll add it myself for browser compatibility */
input[type="email"], input[type="password"], input[type="submit"] {
  -webkit-border-top-left-radius: 360px;
  -moz-border-top-left-radius: 360px;
  -ms-border-top-left-radius: 360px;
  border-top-left-radius: 360px;
  -webkit-border-top-right-radius: 360px;
  -moz-border-top-right-radius: 360px;
  -ms-border-top-right-radius: 360px;
  border-top-right-radius: 360px;
  -webkit-border-bottom-left-radius: 360px;
  -moz-border-bottom-left-radius: 360px;
  -ms-border-bottom-left-radius: 360px;
  border-bottom-left-radius: 360px;
  -webkit-border-bottom-right-radius: 360px;
  -moz-border-bottom-right-radius: 360px;
  -ms-border-bottom-right-radius: 360px;
  border-bottom-right-radius: 360px;
}

input[type="email"], input[type="password"] {
  padding-left: 2.75em;
}

input[type="submit"] {
  width: 100%;
  background-color: #003b64;
  color: white;
  border: 0;
  padding: 8px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

input[type="submit"]:hover {
  background-color: #1677bb;
}

label {
  display: inline;
  position: absolute;
  top: 0.65em;
  left: 2.30em;
  color: #999999;
}

form {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

form .row .row {
  margin: 0 -0.9375rem;
}

body {
  color: #999999;
  background-image: url("http://www.migloo.be/labs/lab1/img/background.jpg");
  background-size: cover;
}

p.intro1, p.intro2 {
  text-align: center;
  color: white;
  font-size: 0.9em;
  margin-bottom: 40px;
  font-family: 'Open Sans';
}

p.intro2 {
  opacity: 0;
}

.wrapper, .morphHeader {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  background-color: #f2f2f2;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  -ms-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  -ms-border-bottom-left-radius: 6px;
  border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  -ms-border-bottom-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.header, .footer, .morphHeader {
  text-align: center;
  text-transform: uppercase;
}

.header, .morphHeader {
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  -ms-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -ms-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  -ms-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 1.7em;
  background-image: url("http://www.migloo.be/labs/lab1/img/backgroundBox.png");
  padding: 2em;
  color: white;
}

.username {
  padding-top: 1.25rem;
}

.submit, .footer {
  padding-bottom: 1.25rem;
}

.morphButton {
  z-index: 999;
  -webkit-border-top-left-radius: 360px;
  -moz-border-top-left-radius: 360px;
  -ms-border-top-left-radius: 360px;
  border-top-left-radius: 360px;
  -webkit-border-top-right-radius: 360px;
  -moz-border-top-right-radius: 360px;
  -ms-border-top-right-radius: 360px;
  border-top-right-radius: 360px;
  -webkit-border-bottom-left-radius: 360px;
  -moz-border-bottom-left-radius: 360px;
  -ms-border-bottom-left-radius: 360px;
  border-bottom-left-radius: 360px;
  -webkit-border-bottom-right-radius: 360px;
  -moz-border-bottom-right-radius: 360px;
  -ms-border-bottom-right-radius: 360px;
  border-bottom-right-radius: 360px;
}

.morphButton, .morphHeader {
  opacity: 0;
  background-color: #1677bb;
  text-align: center;
}

.loading, .success, .failure {
  color: white;
  line-height: 34px !important;
  text-align: center;
}

.tooltip p {
  font-family: 'Open Sans';
  font-size: 13px;
  line-height: 16px;
}

.columns {
  position: relative;
}
JS
var elements = [$(".intro1"), $(".username"), $(".password"), $(".submit"), $("#info .row")];
TweenMax.set($(".avatar"), {"opacity": 0, "display": "none"});

TweenMax.set([$(".wrapper"), elements], {"scale": 0, "opacity": 0});
TweenMax.set(elements, {"scale": 0, "opacity": 0});
TweenMax.set([$(".loading"), $(".success"), $(".failure")], {"scale": 0, "display": "none", "opacity": 0});

$(document).ready(function() {				
	TweenMax.to($(".wrapper"), 1.5, {"opacity":1, "scale":"1", ease: Power4.easeInOut, delay: 0.75});
	TweenMax.staggerTo(elements, 1, {"opacity":1, "scale":"1", ease:Expo.easeOut, delay: 1.75}, 0.1);
});

/* Click on the SUBMIT button */
$(".submit input[type='submit']").click(function(e) {
	e.preventDefault();

	var buttonAnim = $(".morphButton");
	buttonAnim.css({
		'width'		: $(this).outerWidth(),
		'height'	: $(this).outerHeight(),
		'position'	: 'absolute',
		'top'		: $(this).offset().top,
		'left'		: $(this).offset().left,
		'z-index'	: 999,
		'overflow'	: 'hidden'
	});

	var keepMeCentered = (($(".submit input[type='submit']").offset().left + (buttonAnim.width() / 2))) - $(".morphButton").height()/2;

	// if successful
	if($("#username").val() == "john@doe.com" && $("#password").val() == "test") {
		var timeline = new TimelineMax();
		timeline.to($(".morphButton"), 0, {"opacity": 1} )
				.to($(this), 0, {"opacity": 0, "visibility": "hidden"})
				.to($(".morphButton"), 0.5, {"width": $(".morphButton").height(), "left": keepMeCentered, ease:Back.easeInOut, onComplete:function(){
					TweenMax.to($(".loading"), 0.3, {"scale": "1", "display": "inline-block", "opacity": 1, ease: Power4.easeInOut, onComplete:function(){
						setTimeout(morphSuccess, 300) /* Faking a little the loading process */
					}});
				}}
		);
	}
	else {
		var timeline = new TimelineMax();
		timeline.to($(".morphButton"), 0, {"opacity": 1} )
				.to($(this), 0, {"opacity": 0, "visibility": "hidden"})
				.to($(".morphButton"), 0.5, {"width": $(".morphButton").height(), "left": keepMeCentered, ease:Back.easeInOut, onComplete:function(){
					TweenMax.to($(".loading"), 0.3, {"scale": "1", "display": "inline-block", "opacity": 1, ease: Power4.easeInOut, onComplete:function(){
						setTimeout(morphFail, 300) /* Faking a little the loading process */
					}});
				}}
		);
	}
});

function morphSuccess() {
	TweenMax.to($(".intro2"), 1, {"opacity": 0});
	var elements = [$(".username"), $(".password"), $(".submit")];

	var timeline = new TimelineMax();
	timeline.to($(".loading"), 1.5, {"scale": "0", "opacity": "0", ease: Elastic.easeIn, onComplete:function(){ $(".loading").css("display", "none"); } })
			.to($(".morphButton"), 0.5, {"backgroundColor": "#0f9d58", ease:Back.easeInOut})
			.to($(".success"), 1, {"scale": "1", "opacity": "1", "display": "inline-block", ease: Elastic.easeOut}, "-=0.3")
			.staggerTo(elements, 0.5, {"scale": 0, "opacity": 0, ease:Back.easeIn, onComplete:function(){
				var headerAnim = $(".morphHeader");
				headerAnim.css({
					'width'		: $(".wrapper").outerWidth(),
					'height'	: $(".header").outerHeight(),
					'position'	: 'absolute',
					'top'		: $(".wrapper").offset().top,
					'left'		: $(".wrapper").offset().left,
					'z-index'	: 100,
					'overflow'	: 'hidden',
					'opacity'	: 1
				});
				TweenMax.set($(".header"), {"opacity": 0});
				TweenMax.to($(".morphHeader span"), 0.5, {"opacity": 0});
				TweenMax.to($(".morphHeader"), 0.5, {"padding": 0, "height": ($(".wrapper").outerHeight()+"px"), "line-height": (($(".wrapper").outerHeight()-150)+"px"), onComplete:function(){
					$(".morphHeader span").html("Welcome John!");
					TweenMax.to($(".morphHeader span"), 0.25, {"opacity": 1})
					TweenMax.to($(".success"), 0.5, {"opacity": 0, onComplete:function(){
						$(".success").css("display", "none");
						$(".avatar").css("display", "block");
						TweenMax.to($(".avatar"), 1, {"opacity": 1});
						TweenMax.to($(".morphButton"), 0.5, {
							"left": ($(".morphButton").offset().left - 55)+"px",
							"top": ($(".morphButton").offset().top - 130)+"px",
							"width": "150px", "height": "150px", ease: Power4.easeInOut
						});
					}})
				}});
			}}, 0.1)
	;
}

function morphFail() {
	var timeline = new TimelineMax();
	timeline.to($(".loading"), 1.5, {"scale": "0", "opacity": "0", ease: Elastic.easeIn, onComplete:function(){ $(".loading").css("display", "none"); } })
			.to($(".morphButton"), 0.5, {"backgroundColor": "#cc231a", ease:Back.easeInOut, onComplete:function() {
				TweenMax.to($(".failure"), 0.5, {"scale": "1", "opacity": "1", "display": "inline-block", ease: Elastic.easeOut}, "-=0.3"); TweenMax.to([$(".wrapper"), $(".morphButton")], 0.1, {x:"+=10", yoyo:true, repeat:5, ease:Power4.easeInOut});
			}})
			.to([$(".failure"), $(".morphButton")], 0.5, {"opacity": "0", delay: 1})
			.to($(".morphButton"), 0.3, {"width": $(".submit input[type='submit']").outerWidth(), "backgroundColor": "#1677bb", "left": "-1000px"})
			.set([$(".success"), $(".failure")], {"display": "none"})
			.to($(".submit input[type='submit']"), 0, {"opacity": 1, "visibility": "visible", onComplete:function(){
				TweenMax.to($(".intro1"), 1, {"opacity": 0})
				TweenMax.to($(".intro2"), 1, {"opacity": 1})
			}})
	;
}

$(window).resize(function(){
	$(".morphButton").css("left", (($(".submit input[type='submit']").offset().left + ($(".morphButton").width() / 2) ) - $(".morphButton").height()/2)+"px");
	$(".morphButton").css("top", $(".submit input[type='submit']").offset().top);
});
Host Instantly Drag and Drop Website Builder

 

Description

From a few months ago when I was discovering the full potential of GreenSock GSAP. An interactive (fake) login form which provides visual feedback to the user.
Term
Mon, 11/27/2017 - 21:40

Related Codes

Pen ID
Pen ID
Pen ID