DEV Community

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

Posted on

2 1

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!!!!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post