Is it necessary to remove every letter before moving on to the following array position?

Question

Is it necessary to remove every letter before moving on to the following array position?

I've been working on a script to create an animated "self-writing text" effect. However, I'm encountering an issue where each word jumps to the next one instead of smoothly transitioning by deleting each letter before moving on to the next word in the array.

const text = ['design', 'make', 'develop', 'code', 'create']
let count = 0;
let index = 0;
let currentText = "";
let letter = "";

(function type() {
    if (count === text.length) {
        count = 0;
    }
    currentText = text[count];
    letter = currentText.slice(0, ++index);
    
    document.querySelector(".main__animation").textContent = letter;
    if (letter.length === currentText.length) {
        count++
        index = 0;
    }
    setTimeout(type, 500);
}())

Any help or suggestions would be greatly appreciated!

javascript css arrays if-statement iteration

Answer 1

Answer №1

const words = [, 'design', 'make', 'develop', 'code', 'create']
let counter = 1;
let currentIndex = 0;
let currentWord = "";
let letter = "";
var isDeleting = false;

(function typingEffect() {
  if (counter === words.length) {
    counter = 1;
  }
  currentWord = words[counter];

  if (isDeleting) {
    letter = currentWord.slice(0, --currentIndex);
  } else {
    letter = currentWord.slice(0, ++currentIndex);
  }

  document.querySelector(".main-animation").textContent = letter;
  if (letter.length === currentWord.length) {
    isDeleting = true;
  }
  if (letter.length === 0) {
    counter++;
    currentIndex = 0;
    isDeleting = false;
  }
  setTimeout(typingEffect, 500);
}())

<div class="main-animation"></div>

Answer 2

const words = [, 'design', 'make', 'develop', 'code', 'create']
let counter = 1;
let currentIndex = 0;
let currentWord = "";
let letter = "";
var isDeleting = false;

(function typingEffect() {
  if (counter === words.length) {
    counter = 1;
  }
  currentWord = words[counter];

  if (isDeleting) {
    letter = currentWord.slice(0, --currentIndex);
  } else {
    letter = currentWord.slice(0, ++currentIndex);
  }

  document.querySelector(".main-animation").textContent = letter;
  if (letter.length === currentWord.length) {
    isDeleting = true;
  }
  if (letter.length === 0) {
    counter++;
    currentIndex = 0;
    isDeleting = false;
  }
  setTimeout(typingEffect, 500);
}())

<div class="main-animation"></div>

Answer 3

Answer №2

Here is the solution I have come up with. If you have any questions, feel free to ask.

function createAnimation(words, target, speed) {
  let wordIndex = 0;
  let i = 0;
  let erase = false;
  
  const handler = () => {
    const word = words[wordIndex];
    
    if (erase) {
        target.innerText = target.innerText.slice(0, -1);
        
        if (!target.innerText.length) {
            wordIndex = (wordIndex + 1) % words.length;
            i = 0;
            erase = false;
        }
    } else {
        target.innerText += word.charAt(i);
        i++;
        
        if (i === word.length) {
            erase = true;
        }
    }
  };
  
  let interval = null;
  
  return {
      start() {
          interval = setInterval(handler, 1000 / speed)
      },
      stop() {
          clearInterval(interval);
      }
  }
}

const animation = createAnimation(
  ['design', 'make', 'develop', 'code', 'create'],
  document.getElementById('target'),
  5 // [letters/s]
);

animation.start();

// TO STOP, CALL animation.stop()

<h1 id='target'></h1>

Answer 4

Here is the solution I have come up with. If you have any questions, feel free to ask.

function createAnimation(words, target, speed) {
  let wordIndex = 0;
  let i = 0;
  let erase = false;
  
  const handler = () => {
    const word = words[wordIndex];
    
    if (erase) {
        target.innerText = target.innerText.slice(0, -1);
        
        if (!target.innerText.length) {
            wordIndex = (wordIndex + 1) % words.length;
            i = 0;
            erase = false;
        }
    } else {
        target.innerText += word.charAt(i);
        i++;
        
        if (i === word.length) {
            erase = true;
        }
    }
  };
  
  let interval = null;
  
  return {
      start() {
          interval = setInterval(handler, 1000 / speed)
      },
      stop() {
          clearInterval(interval);
      }
  }
}

const animation = createAnimation(
  ['design', 'make', 'develop', 'code', 'create'],
  document.getElementById('target'),
  5 // [letters/s]
);

animation.start();

// TO STOP, CALL animation.stop()

<h1 id='target'></h1>

Is it necessary to remove every letter before moving on to the following array position?

Answer №1

Answer №2

Similar questions

Tips for verifying phone numbers on an HTML form

Can a variable be assigned to an innerHTML id?

The content could not be created due to an inability to lazily initialize a collection of roles. The proxy could not be initialized as there was no

Beginning the process of setting up information windows for map markers with the help

Issues with Boostrap grid system on smaller screens

Creating a CSS layout with tabs that include a visually appealing right space

Preventing page refresh with Javascript when clicking on CAPTCHA

Exploring Angular Route Configurations: Utilizing Multiple Outlets with Path as an Array of

jquery-enhanced tabs with versatile functionality

Using a WCF RESTful web service to handle POST requests and HTML forms

I desire a smooth fade-in transition for the background image when the addClass function is

Opt for buttons for color selection instead of a checkbox toggle

transferring iterative information via ajax data flow

`Trouble with CSS Measurement Properties in Internet Explorer 10`

Obtain Rails database queries in real-time

In Node.js, JavaScript, when using SQLite, the variables are inserted as Null

Customizing the color of pagination in Bootstrap

Using a JavaScript onclick function to retrieve specific elements within the document

Leveraging CreateBrowserRouter from React Router alongside a Redux store

Send a request from my own local client without encountering any Cross-Origin Resource Sharing (C