Animated Prepopulation (concept) on Input Element

Animated Prepopulation. What if attention was brought to the actual prepopulation of form fields with animation?

by Konstantin Rouda

HTML

<input type="text">

<input type="email">



<!--
Inspired by sketch of Jakub Linowski
from: https://www.instagram.com/p/BVZ4XZLB_Fr/
-->

CSS

.focused {
    //box-shadow: 4px 4px 20px rgb(253, 255, 53), -4px -4px 20px rgb(253, 255, 53);
    box-shadow: 2px 4px 20px rgba(255, 239, 9, .76), -2px -4px 20px rgba(255, 239, 9, .76);
    border: 1px solid rgba(0, 0, 0, .3);
}

JavaScript

var inpt = document.getElementsByTagName("input");

var counter = 0;

var arr = ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "."];


setTimeout(function() {

    inpt[0].classList.add("focused");

    var interValID = setInterval(function() {

      if(counter >= arr.length) {
          clearInterval(interValID);
          inpt[0].classList.remove("focused");
          inpt[1].focus();
          return;
      };

      inpt[0].value += arr[counter++];

    }, 300);


}, 3000);

Array.from(inpt).forEach(function(v) {
  
  v.addEventListener("focus", inputOnFocus);

});


function inputOnFocus(e) {

   e.target.classList.add("focused");
   
};