⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Typing Text Animation Tutorial Array Loop Programming

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to program arrays and timed loops in JavaScript to animate typing text. We string.split() any string into an array, that we can then use array.shift() on to pluck each element off of the front of the array that represents your string. 
<html>
<head>
<style>
#myTypingText {
	background-color:#000;
	width:700px;
	height:120px;
	padding:12px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
        font-size:16px;
	line-height:1.5em;
}
</style>
</head>
<body>
<div id="myTypingText"></div>
<script>
var myString = "Place your string data here, and as much as you like.";
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
	if(myArray.length > 0) {
		document.getElementById("myTypingText").innerHTML += myArray.shift();
	} else {
		clearTimeout(loopTimer); 
                return false;
	}
	loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
</script>
</body>
</html>
▲