Floating Input Lable With Wave Animation

Preview:

Description:

A floating label design concept that moves labels to the top of the input fields with a wave animation when focused on.

How to use it:

1. Add a label element to the input field.

<div class="form-control">
  <input type="text" required>
  <label>Email</label>
</div>

2. The necessary CSS styles.

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
}
.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus + label span,
.form-control input:valid + label span {
  color: lightblue;
  transform: translateY(-30px)
}

3. Enable the floating label.

const labels = document.querySelectorAll('.form-control label')
labels.forEach(label => {
  label.innerHTML = label.innerText
  // splitting inner text (email) into an array, which will put each letter in its own item in the array
  .split('')  
  // mapping it to create an array of the letter with a span around it
  .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)  
  // turning back array into a string
  .join('') 
})