JavaScript Animate Typing Text with Rich Content and New Lines Tutorial
Published : October 29, 2025Last Edited : November 24, 2025
Author : Adam Khoury
Experience the next evolution of the classic typing text effect! Learn to animate typing text with rich content, visual effects, JavaScript timing mechanics, working with Arrays, conditional statements, event handling, and native JavaScript syntax.
This demonstration showcases a custom JavaScript and CSS script engineered to deliver more than just text. It generates content dynamically, simulating the appearance of being typed out character by character, but with powerful support for rich content and special formatting.Key Features
Character-by-Character Generation: The text appears sequentially, mimicking real-time typing. Rich Content Integration: Special characters within the source string are interpreted to insert HTML elements, not just plain text. Advanced Line Control: The newline character is converted into an HTML break element, ensuring clean new lines for text flow. The carriage return character is interpreted as an instruction to insert a horizontal rule, visually separating content sections. Stunning Visual Design: The text is displayed using the elegant Tangerine font and features a vibrant, attention-grabbing yellow text-shadow glow, all set against a sleek dark background. This script offers a highly customizable foundation for creating engaging introductions, interactive storytelling, or dynamic content displays on your website.<style>
body {
background-color: #111;
}
#div1 {
font-size: 90px;
font-family: Tangerine;
color: #fff;
text-shadow:
0 0 9px #ffdb17,
0 0 18px #ffdb17,
0 0 36px #ffdb17;
}
</style>
<script>
const mystring = "This is line 1.|\nHi, I'm line 2.\nWelcome to line 3.\runder a line";
const myarray = mystring.split("");
let myinterval, char;
function typingText() {
if(myarray.length > 0) {
char = myarray.shift();
if(char == "\n"){
div1.innerHTML += '<br>';
} else if(char == "\r"){
div1.innerHTML += '<hr>';
} else if(char == "|"){
div1.innerHTML += ' <button>Click me</button>';
} else {
div1.innerHTML += char;
}
} else {
clearInterval(myinterval);
return false;
}
}
window.addEventListener("load", ()=> {
setTimeout( ()=> {
myinterval = setInterval( typingText, 150 );
}, 2000);
});
</script>
<body>
<div id="div1"></div>
</body>