DEV Community

Cover image for Auto typing text animation in JavaScript
Manoj Rathod
Manoj Rathod

Posted on

Auto typing text animation in JavaScript

Demo:- https://codepen.io/iammanojrathod/pen/PoJLExZ

This is Auto typing text effect using simple JavaScript.

CSS code: -

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1C6DD0;
  color: #000;
  font-size: 30px;
  font-weight: 700;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript: -

const text = "This is the typing text effect in JavaScript";

let index = 0;

function writeText() {
document.body.innerHTML = text.slice(0, index);

  index++;

  if (index > text.length) {
    index = 0;
  }
};

setInterval(writeText, 100);
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
manethye profile image
Maneth

Thanks!!!!