A Typewriter Animation Using JS

Hello Guys,

This is my first blog on Medium, so read it, try it, and if you have suggestions or doubt comment here.

So, let's first see our final animation

Typewriter Animation

So, this is nothing but a combination of two functions in JS, one for blinking pointer and the second one for writing part.

So let’s start with the blinking pointer part:

Let’s say one blinking of the pointer takes 1 second

That means half-second for the red color and second-half for the transparent part. Now what we do is write a function in JS that sets these properties after some time interval, call that function.

function blinkingPointer(){
  setTimeout(()=>{
    document.getElementById('check').style.
      borderRightColor=`red`;
  },500);
  setTimeout(()=>{
    document.getElementById('check').style.
      borderRightColor='transparent';
  },1000);
}
blinkingPointer();

But this is not enough, because it only does it once so for continuous blinking we have to call this function again after one second repeatedly.

  setTimeout(()=>{
    blinkingPointer();
  },1000);

So adding the above snippet in the blinkingPointer function makes blinking continuous.

Now this Part is completed so let’s move to the typing part. But before that let’s take a look at our HTML

<div id="check">
  I am
  <span id="typewriter"> </span>
</div>

So, we have a div with id check and inside it, we have a span with id typewriter. And now the whole CSS depends on you, how you want it to look but I am also adding some CSS to make it work.

#check{
  margin:0px auto;
  width: fit-content;
  border-right: 1px solid;
}

Although the border-right property would not have been required here, as it can also be added to the blinking part itself, I thought to put minimum styles in JS. The margin and width are required to center the content from both sides.

Here, we provide our data to be shown in an array, and also defines speed and length;

let data = ["Text1", "Text2","Text3","Text4"];
let len = 0;
let speed=150;
for (let i = 0; i < data.length; ++i)
  len += 2*data[i].length;
len += 4*data.length;

This means every letter will be shown and removed after 150 ms and ‘len*speed’ represents the total time it will be taken by one cycle to complete. Now if we write a function to iterate over whole and array and for every letter, it will take no time to do this, so we have to delay writing and deletion of characters from time zero.

So, let’s write the function and analyze it.

function type() {
  let p=0;
  
  for (let i = 0; i < data.length; ++i) {
    let x = 0;
    while (x <= data[i].length) {
      let y=x;
      setTimeout(()=>{
      document.getElementById('typewriter').innerHTML=
            `${data[i].substr(0,y)}`;
      } , p*speed );
      ++x,++p;
    }
    --x,p+=2;
    while (x >= 0) {
      let y=x;
      setTimeout(()=>{
      document.getElementById('typewriter').innerHTML=
            `${data[i].substr(0,y)}`;
      },p*speed);
      --x,++p;
    }
  }
}

Here, in this code p acts as the base, and each insertion and deletion of each letter is delayed to some particular amount of time calculated using p. The particular `p+=2` is also added between two while loops to increase the time for which our whole letter will be shown.

But again this function is good only for one cycle, so let’s put another setTimeout to book a call for the function after some time.

  setTimeout(() => {
    type();
  }, len * speed);

Now appending this part in the function above will make it continuous.

And yeh, that’s all.

Now go and make your website cool.

Not feeling like writing this code again but have a quick modification to see its effect, head to codepen site and try them.

https://codepen.io/akashbansal-cp/pen/zYwvWRe

Enjoy, Clap, and Develop.

Happy Development.