How to prevent the previous string from being displayed with typed.js

Question

I'm working on a simple website component that emulates a terminal display. I am using typed.js to do the character printing. Strings are preloaded into an array and typed onto the screen from the bottom, scrolling the lines up as each new string is printed.

The initial effect is working pretty well, but I have one issue.

Each time a new string is getting ready to be printed, the previous string briefly appears on the line, before being erased and the new string is typed in. I've been modifying options like backSpeed, but I can't seem to get the exact output that I desire.

I recorded this gif to show the problem. That duplicate Running... line on the bottom only shows up for a split second before being deleted and Booting... starts to print. I'm trying to ensure that ghost text doesn't display at all.

The desired output should work as though its a terminal emulation. Meaning that after a string is printed to the screen, it gets pushed up a line, as if it were "entered", and then a new blank line appears with a blinking cursor, waiting for the next "input". The next string is typed to the line, and then "entered". This keeps happening until all strings are exhausted, then the scrolling stops, and the bottom line is blank line, just showing the blinking cursor, as if waiting for a new command.

I have a working example in this JSFiddle. The code is set to loop for testing. The loop will not be in the final product.

Steps Taken:

• Researching this issue has been difficult because of the name of the package skewing results for TypeScript.
• Combining the strings into a single line and using bulk typing. I'd rather have the lines separated, and once the next line prints, the previous tag picks up the ^1000 as printed text.
• SmartBackspacing didn't seem to be the right thing for this
• Different settings for backspacing

Answer 1

Typed.js has a timeout before backspacing (deleting) current string. So it puts back your cleared text during backspacing. As a workaround, you can add your previous text to your "output" before starting next line on preStringTyped event. If you need last line to be added, you can add it on onLastStringBackspaced event.

var typed = new Typed("#typed", {
  strings: [
    "Initializing...",
    "Loading...",
    "Starting...",
    "Running...",
    "Booting...",
  ],
  typeSpeed: 50,
  loop: true,
  smartBackspace: false,
  preStringTyped: function(arrayPos, self) {
   if(arrayPos) {
      // Create a new p tag and insert it into the typed-output div
      const newP = document.createElement("p");
      newP.textContent = self.strings[arrayPos-1];
      document.getElementById("typed-output").appendChild(newP);
   }
  },
  onLastStringBackspaced: () => {
  const newP = document.createElement("p");
      newP.textContent ="Booting...";
      document.getElementById("typed-output").appendChild(newP);
  },
});