Javacript/jQuery animation makes text appear/disappear as if typed
For those who dont like typed.js, Modified code for the user code is.

Here,


content -> is the text that shows the typing effect.
speed ->  is the typing effect speed.   i  -> this will help in
iterating over the content till it reaches the content length.  
timer  -> we use this variable to assign the setTimeout(), so
that after the text content is looped, we can use this variable to
clear timer. This  will prevent memory leakage.  
intervalCount  ->
this variable is used to initialise how many times the content need
to toggle.




const content = 'Code Review'; // text content to show typing effect
const speed = 1000; // this is the typing speed 
var i = 0;  // this is used to iterate over the text content
var timer = 0;  // this is used to set and clear timer. This will prevent memory leakage  
var intervalCount = 0; // this is used to set no. of times typing effect should loop.


Here initially i will be 0, then it checks with the content length. If i &lt; content.length, then it will add content[i] to the dom. After that i is incremented by 1, then a setTimeout() function is called. This will invoke the typeSetting once again, at this time i will 1 and it will print content[1]. This will loop untill i become the content length.

This condition will iterate over the text content and displays them.

if (i &lt; content.length) {
        el.before(`&lt;span class='typed-letter'&gt;${content[i]}&lt;/span&gt;`);
        i++;
        timer = setTimeout(function() {
          typeSetting(intervalCount)
        }, speed);
      }


Now the else part, here first it will clear the timer ( Which will prevent the memory leakage ), then it decrement the intervalCount, check for the intervalCount is  &gt; 0, then set i = 0 ( this will help in printing the string from begining ). Again in a setTimeout() is called. At this time, the printed content is removed and starts printing again. Again the if loop explained above is executed. This will continue untill the intervalCount becomes 0.         

else {
clearTimeout(timer);
intervalCount = intervalCount ? intervalCount - 1 : 0;
if (intervalCount) {
    i = 0;
    timer = setTimeout(function() {
    $(".typed-letter").empty();
    typeSetting(intervalCount);
    }, 300);
}
}      


For more realistic typing effect, we can add a blinking animation to the |.

.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}




const content = 'Code Review';
const speed = 100;
var i = 0;
var timer = 0;
var intervalCount = 0;

function typeSetting(interval) {
  let el = $('#bar');
  if (interval) intervalCount = interval;  
  if (i &lt; content.length) {
    el.before(`&lt;span class='typed-letter'&gt;${content[i]}&lt;/span&gt;`);
    i++;
    timer = setTimeout(function() {
      typeSetting(intervalCount)
    }, speed);
  } else {
    clearTimeout(timer);
    intervalCount = intervalCount ? intervalCount - 1 : 0;
    if (intervalCount) {
      i = 0;
      timer = setTimeout(function() {
        $(".typed-letter").empty();
        typeSetting(intervalCount);
      }, 300);
    }
  }
}

(function() {
  typeSetting(2); // may be you are using some kind of repetition count, set the count. If no params then will show 1 time.
})();
p {
  line-height: 10px;
}
.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;p&gt;&lt;span id="bar" class="blinking"&gt; |&lt;/span&gt;&lt;/p&gt;




Here no external packages are used, no libraries. Its pure javascript.