fresh-typedjs/dist/freshType.esm.js

My library lets you input text (a word or a paragraph) and specify a timing to animate writing or deleting each letter one by one,

const words = ["parsa", "fresh", "typed", "javaScript"];
const TimeSpeed = 1500;
let freshType = document.querySelectorAll(".freshType");

freshType.forEach((item) => {
  item.classList.add("relative");
  item.classList.add("afterText");
  item.style.whiteSpace = "pre";
});

let textTypeBasic = document.querySelector(".textTypeBasic");
let flagBasic = 0;
let setBasic = setInterval(() => {
  if (flagBasic < words.length) {
    if (flagBasic < words[flagBasic].length) {
      textTypeBasic.innerText = words[flagBasic];
      flagBasic++;
    } else {
      textTypeBasic.innerText = "";
    }
  } else {
    clearInterval(setBasic);
  }
}, TimeSpeed);

// /////////////////////////////////////////////////////////////////////////////

let flagBasicLoop = 0;
let textTypeBasicLoop = document.querySelector(".textTypeBasicLoop");
setInterval(() => {
  if (flagBasicLoop < words.length) {
    if (flagBasicLoop < words[flagBasicLoop].length) {
      textTypeBasicLoop.innerText = words[flagBasicLoop];
      flagBasicLoop++;
    } else {
      textTypeBasicLoop.innerText = "";
    }
  } else {
    flagBasicLoop = 0;
  }
}, TimeSpeed);

// /////////////////////////////////////////////////////////////////////

let TextLetterTypeLoop = document.querySelector(".TextLetterTypeLoop");

let flagLetterLoop = 0;
let flagLetterLoop2 = 0;
let flagBooleanLetterLoop = true;

setInterval(() => {
  if (flagLetterLoop < words.length) {
    if (flagBooleanLetterLoop == true) {
      TextLetterTypeLoop.innerText += words[flagLetterLoop][flagLetterLoop2++];

      if (flagLetterLoop2 == words[flagLetterLoop].length) {
        flagBooleanLetterLoop = false;
      }
    } else {
      flagLetterLoop2--;
      TextLetterTypeLoop.innerText = words[flagLetterLoop].slice(
        0,
        flagLetterLoop2
      );
      if (flagLetterLoop2 === 0) {
        TextLetterTypeLoop.innerText = "";
        flagBooleanLetterLoop = true;
        flagLetterLoop++;
      }
    }
  } else {
    flagLetterLoop = 0;
  }
}, TimeSpeed);

// //////////////////////////////////////////////////////////////////////

let TextLetterTypeHide = document.querySelector(".TextLetterTypeHide");

let flagLetterHide = 0;
let flagBooleanLetterHide = true;
let flagLetterHide2 = 0;

let setLetterHide = setInterval(() => {
  if (flagLetterHide < words.length) {
    if (flagBooleanLetterHide) {
      TextLetterTypeHide.innerText += words[flagLetterHide][flagLetterHide2++];

      if (flagLetterHide2 == words[flagLetterHide].length) {
        flagBooleanLetterHide = false;
      }
    } else {
      flagLetterHide2--;
      TextLetterTypeHide.innerText = words[flagLetterHide].slice(
        0,
        flagLetterHide2
      );
      if (flagLetterHide2 == 0) {
        flagLetterHide++;
        flagBooleanLetterHide = true;
        TextLetterTypeHide.innerText = "";
      }
    }
  } else {
    clearInterval(setLetterHide);
  }
}, TimeSpeed);

// //////////////////////////////////////////////////////////////////////

let paragraph = "parsa the perfect \n front end developer";

let TextparagraphType = document.querySelector(".TextparagraphType");

let flagParagraph = 0;
let flagBooleanParagraph = true;

setInterval(() => {
  if (flagBooleanParagraph) {
    TextparagraphType.innerText += paragraph[flagParagraph++];
    if (flagParagraph == paragraph.length) {
      flagBooleanParagraph = false;
    }
  } else {
    flagParagraph--;
    TextparagraphType.innerText = paragraph.slice(0, flagParagraph);

    if (flagParagraph === 0) {
      flagBooleanParagraph = true;
      TextparagraphType.innerText = "";
    }
  }
}, TimeSpeed);