Typewriter 02

Demo: https://codepen.io/tuanhero/pen/yLwLRBM

Tested on 7.1.

Add a Code Block > Use this code (With Personal Plan, you can add via Markdown Block)

<h1 class="tp-typewriter-02"></h1>
<style>
  .tp-typewriter-02 {
  color: black;
  text-align: center;
  display: inline-block;
  padding: 0;
  border-right: 1px solid #414141;
}
</style>
<script>
  // Define an array of strings to be displayed and erased
const textArray = [
  "Hello!",
  "This is an Infinite typing animation",
  "Enjoy"
  // Add more strings as needed
];

// Initialize variables
let typeJsText = document.querySelector(".tp-typewriter-02");
let stringIndex = 0; // Index of the current string in the array
let charIndex = 0; // Index of the current character in the current string
let isTyping = true; // Whether we are currently typing or erasing

function typeJs() {
  if (stringIndex < textArray.length) {
    // Check if there are more strings to display or erase
    const currentString = textArray[stringIndex];

    if (isTyping) {
      // Typing animation
      if (charIndex < currentString.length) {
        typeJsText.innerHTML += currentString.charAt(charIndex);
        charIndex++;
      } else {
        isTyping = false; // Switch to erasing mode
      }
    } else {
      // Erasing animation
      if (charIndex > 0) {
        typeJsText.innerHTML = currentString.substring(0, charIndex - 1);
        charIndex--;
      } else {
        isTyping = true; // Switch back to typing mode
        stringIndex++; // Move to the next string

        if (stringIndex >= textArray.length) {
          stringIndex = 0; // Reset to the beginning of the array
        }

        charIndex = 0; // Reset character index
        typeJsText.innerHTML = ""; // Clear the content for the new string
      }
    }
  }
}

// Set an interval to call the typeJs function
setInterval(typeJs, 100); // You can adjust the animation speed as needed

</script>