npm Library
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, with an optional loop to repeat the animation.
Basic Demo
html code
<h2 class="freshType textTypeBasic"></h2>
js code
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);
Basic Demo Loop
html code
<h2 class="freshType textTypeBasicLoop"></h2>
js code
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 textTypeBasicLoop = document.querySelector(".textTypeBasicLoop");
let flagBasicLoop = 0;
setInterval(() => {
if (flagBasicLoop < words.length) {
if (flagBasicLoop < words[flagBasicLoop].length) {
textTypeBasicLoop.innerText = words[flagBasicLoop];
flagBasicLoop++;
} else {
textTypeBasicLoop.innerText = "";
}
} else {
flagBasicLoop = 0;
}
}, TimeSpeed);
letter type Loop
html code
<h4 class="freshType TextLetterTypeLoop"></h4>
js code
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 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);
letter type hide
html code
<h5 class="freshType TextLetterTypeHide"></h5>
js code
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 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);
paragraph type
html code
<h5 class="freshType TextparagraphType"></h5>
js code
let paragraph = "parsa the perfect \n front end developer";
const TimeSpeed = 100;
let freshType = document.querySelectorAll(".freshType");
freshType.forEach((item) => {
item.classList.add("relative");
item.classList.add("afterText");
item.style.whiteSpace = "pre";
});
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);
Css you should have in your code and after that you can copy html and js code on top
css code
.anim {
animation: anim 1s forwards infinite alternate;
}
.afterText::after {
content: "";
background-color: rgb(255, 255, 255);
width: 3px;
height: 1em;
position: absolute;
margin-left: 0.375rem;
margin-top: 0.25rem;
animation: anim 0.5s linear infinite;
}
@keyframes anim {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
Custom
You can control the typing speed using the timeSpeed variable and define your text through the words or paragraph variables.
custom code
let paragraph = "parsa the perfect \n front end developer";
const words = ["parsa", "fresh", "typed", "javaScript"];
const TimeSpeed = 1500;