TypeWriter Javascript effect

Question

I have implemented a Javascript TypeWriter effect for my website. It types out code using the TypeWriter variable by adding each character on and setting a timeout. It then 'deletes' code using text slice and 're types.

I had big problems in setting a timeout for the individual functions because each time I did the speed would double.

I just tried to get the code working before making it more practical. At the moment my code is very linear and not very dynamic. Can anyone suggest some edits to make to make it more fluid? I'm not advanced, please go easy on me!

 /* 
 typewriter.js
 Displays a typing effect on the home page.
 Tried to implement recursion instead of calling different functions but had trouble.
 **/
 var text1 = 'Hi, I\'m Ainsley I like';
 var text2 = ' love to code...';
 var id = 'typing-text1';
 var deleteUpTo = 17;
 var linebreak = 15;
 var speed = 150;
 var char = 0;
 var reType = 0;
 var textLength = text1.length;

 var typewrite = ' ';

 function typeWriter() {
    if (char < linebreak) {
       typewrite += text1[char];
       char++;
       setTimeout(typeWriter, speed);
       document.getElementById(id).innerHTML = typewrite;
    } else {
       typewrite += '<br />'
       printNewLine();
    }
 }

 function printNewLine() {
    if (char < text1.length) {
       typewrite += text1[char];
       char++;
       setTimeout(printNewLine, speed);
       document.getElementById(id).innerHTML = typewrite;
    } else {
       char = document.getElementById(id).innerHTML.length;
       deleteText();
    }
 }

 function deleteText() {
    if (char > 24) {
       typewrite = typewrite.slice(0, char);
       char--;
       document.getElementById(id).innerHTML = typewrite;
       setTimeout(deleteText, speed);
    } else {
       rePrintText();
    }
 }

 function rePrintText() {
    if (reType < text2.length) {
       typewrite += text2[reType];
       reType++;
       document.getElementById(id).innerHTML = typewrite;
       setTimeout(rePrintText, speed);
    }
 }

Answer 1

One loop to rule all animation.

For almost all realtime animations the whole thing is handled from one timed loop running at as close to a constant rate as is possible.

Having many different timers call many different functions quickly gets complicated and very hard to follow.

For the browser requestAnimationFrame should be used for any content animations. It calls a special functions that holds any changes made to the DOM in a back buffer until the next display vertical refresh (60 times a second)

This ensures that the animation is in sync with the display and any other DOM rendered content.

You use that function as the main loop to control all the associated animation content.

Simulating the typist

You have over complicated the typer. All that is needed is the current character position and a way to move and clear lines when a newline char is found.

The function called by requestAnimationFrame is given the current time since the page loaded. You can use that time to calculate the character position and then iterate over the characters needing to be added, checking for new lines.

A variable is kept currentLine that holds the current typing line and you just append text to that as you go.

To reduce the load you can reuse existing elements, removing it from the top, and appending it to the bottom. See newLine function in example below

Example

Rather than change your code, I have started from scratch. There is one main loop function called typer and a function to setup a new line. The character position is calculated by dividing the time since start by the speed.

If you want to speed up the rate of characters just subtract from the start time. I have added an example that randomly speeds up every 1/20 character. To slow down just add to the start time.

requestAnimationFrame(typer);

const words = `
 Testing type writer.
 And now some more text.
 You can remove some<<<<<<<<<<<delete text as well.
 Displays a typing effect on the home page.
 If you want to speed up the rate of characters just subtract from the start time.
 I have added an example that randomly speeds up every 1/20 character. 
 To slow down just add to the start time.`;

const leftChar = ":>";
const textContainer = document.getElementById('typingText');
const speed = 100;
var startTime;
var lastCharPos;
var currentLine;

for (let i = 0; i < 2; i++) {
  textContainer.appendChild(Object.assign(document.createElement("div"), {
    className: "typed--typed-text",
    textContent: ""
  }));
}
// removes top line, clears it and adds to bottom of container
function newLine() {
  currentLine = textContainer.querySelector(".typed--typed-text");
  textContainer.removeChild(currentLine);
  textContainer.appendChild(currentLine);
  currentLine.textContent = leftChar;
}


function typer(time) {
  var str = "";
  if (startTime === undefined) {
    newLine();
    startTime = time;
    lastCharPos = 0;
  }

  // 1 in 20 characters are 50ms faster
  if (Math.random() < 0.05) { startTime -= 50 }

  const charPos = (time - startTime) / speed | 0;
  while (lastCharPos <= charPos) {
    const char = words[(lastCharPos++) % words.length];
    if (char === "\n") {
      currentLine.textContent += str;
      str = "";
      newLine();
    } else if (char === "<") {
      const text = currentLine.textContent;
      currentLine.textContent = text.substring(0,text.length-1);
    } else {
      str += char;
    }
  }
  currentLine.textContent += str;
  requestAnimationFrame(typer);
}

.typed {}

.typed--typed-text {}

<div id="typingText" class="typed">
</div>