Form Animation on Focus JS and CSS

form-animation-on-focus-js-and-css.markdown

Form Animation on Focus JS and CSS

UPDATE: This is now pure JavaScript. It was jQuery. UPDATE: Using delegates instead of loops with event listeners. UPDATE: Added check for inputs with values already set, adds 'focus' class to parent. This is a pretty simple example of how to animate form elements on the focus event. The order of the input and label elements is important. The CSS targets the next sibling of the input, which gets the focus event. There are probably other ways to do this with just JS, but I like this because it works regardless of the form blocks or form width. It takes advantage of flexbox. JS is simply adding the class. The rest is CSS.

A Pen by sinrise on CodePen.

License.

index.html

<form>
	<div class="form-block">
		<input id="name" name="name" type="text" class="control">
		<label for="name">name</label>
	</div>
	<div class="form-block">
		<textarea id="description" name="description" cols="50" rows="10" class="control"></textarea>
		<label for="description">description</label>
	</div>
	<button type="submit">submit</button>
</form>

script.js

var controls = document.getElementsByClassName("control")
for (var i = 0; i < controls.length; i++) {
  if(controls[i].value != ""){
    controls[i].parentElement.classList.add("focus")
  }
}

//focus/blur form control states
document.addEventListener('focus', function(e){
  if(e.target.matches('.control')){
    e.preventDefault()
    e.target.parentElement.classList.add("focus")
  }
}, true)

document.addEventListener('blur', function(e){
  if(e.target.matches('.control')){
    e.preventDefault()
    if(e.target.value == "") {
      e.target.parentElement.classList.remove("focus")
    }
  }
}, true)

style.scss

html { background-color: rgb(50,50,50); }
body { margin: 50px; }
button { margin-left: auto; }

form {
	max-width: 500px;
	display: flex;
	display: -ms-flexbox;
	flex-direction: column;
	padding: 20px 10px;
	border: 1px solid gray;
}

.form-block {
	position: relative;
	display: flex;
	display: -ms-flexbox;
	flex-direction: column;
	width: 100%;
	margin: 0 0 20px;
	&::before, &::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
	}
	&::before {
		background-color: gray;		
	}
	&::after {
		width: 0;
		background-color: white;		
		transition: width 0.2s;
	}
	&.focus {
		&::after {
			width: 100%;
			transition: width 0.4s;
		}
		label {
			transform: scale(.8);
		}
	}
	input, select, textarea {
		width: 100%;
		font-family: sans-serif;
		color: gray;
		background: transparent;
		border-color: gray;
		border-style: solid;
		border: 0;
		outline: 0;
	}
	label {
		position: absolute;
		left: 0;
		top: 3px;
		transform-origin: 0px -70px;
		transform: scale(1);
		font-family: sans-serif;
		color: gray;
		transition: all 0.2s;
	}
	.control {
		display: block;
		outline: none;
		padding: 5px 0;
	}
}