JavaScript Text Typing Animation | Typewriter Effect

HTML JavaScript Typewriter Text Scrolling, Text Typing Animation

Demo Typewriter
Demo
1

Add Your Message Text/HTML

Insert Text
2

Messages drag list up/down to reorder

  • 1
  • 2
  • 3
3

Preview Typing Animation

Loading Google Font
4

Add Styles

Hidden
Loading...
Generate code
Google Font Link
HTML
Paste this code between the body tag where you want it to appear
CSS
Paste this code between the head tag
JavaScript
Paste this code between the body tag, at the bottom of the page
Full Code Run code Edit Code Download

JavaScript Text Typing And Deleting Effect

HTML
<textarea id="typing-deleting-text" readonly></textarea>
CSS
#typing-deleting-text {
  width: 500px;
  height: 30px;
  font-size: 15px;
  border: solid 1px #C9C9C9;
  color: #000000;
  background-color: #FFFFFF;
  text-align: left;
  font-family: Arial;
  font-weight: bold;
  padding: 5px;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
JavaScript
(() => {
    let CharacterPos = 0;
    let MsgBuffer = "";
    let TypingSpeed = 50; // Millisecond
    let NxtMsgDelay = 1000; // Millisecond
    let MsgIndex = 0;
    let delay;
    let deletePos = 1;
    let deleteSpeed = 5; // Millisecond
    let id = document.getElementById("typing-deleting-text");

    let messages = [
      "Welcome to html-codes-generator.com!",
      "JavaScript Typewriter Text Scrolling Generator",
      "Online HTML Code Generator"
    ];

    const StartTyping = () => {
        if (CharacterPos != messages[MsgIndex].length) {
            MsgBuffer += messages[MsgIndex].charAt(CharacterPos);
            id.value = MsgBuffer + (CharacterPos != messages[MsgIndex].length - 1 ? "_" : "");
            delay = TypingSpeed;
            id.scrollTop = id.scrollHeight; //auto scroll bottom
        } else {
            deletePos = 1;
            setTimeout(deleteTyping, NxtMsgDelay);
            return;
        }
        CharacterPos++;
        setTimeout(StartTyping, delay);
    };
    const deleteTyping = () => {
        if (deletePos != messages[MsgIndex].length) {
            id.value = messages[MsgIndex].slice(0, -deletePos);
        } else {
            MsgBuffer = "";
            CharacterPos = 0;
            if (MsgIndex != messages.length - 1) {
                MsgIndex++;
            } else {
                MsgIndex = 0;
            }
            StartTyping();
            return;
        }
        deletePos++;
        setTimeout(deleteTyping, deleteSpeed);
    };
    StartTyping();
})();
Try it Yourself
Report Problem