Implementing animations on an array of string values-CodePudding

My goal is to try to animate text. Every example on how to animate text looks at a singular string. I'd like to animate an array of string values, one after the other.

The problem I'm getting is that although I'm creating the elements needed successfully, only the .word3 class is actually being rendered. I'm not sure why this is and after banging my head against the wall, I'm not sure how to fix it.

I've used a lot of stack overflow resources to overcome things like using setTimeout in a for loop which lead to using an iife.. Here is the code that I've settled on for the time being. Using async caused a lot of issues as async needs to be at the top level apparently and I often got the 'unexpected reserved keyword error'.

There must be a simple way to do this?

All help is appreciated, thanks!

    const wrapper = document.querySelector(".wrapper");
    const buttonCreate = document.querySelector(".create-element");
    const buttonAnimate = document.querySelector(".animation");
    buttonCreate.addEventListener("click", createElement);

    let i = 0;
    let j = 0;

    let sampleArray = ["Just", "another", "cool", "heading"];

    function createElement() {
      // debugger
      // Create text wrapper in main body and add class
      const newDiv = document.createElement("div");
      newDiv.classList.add("text-wrapper");
      wrapper.insertAdjacentElement("afterbegin", newDiv);
      // Modifying text-wrapper html to include p tag with dynamic class
          function word() {
          sampleArray.map((word, i) => {
          newDiv.innerHTML  = `<p ></p>`;
          let element = document.querySelector(`.word${i}`);
          console.log(element);

          let j = 0
          let interval = setInterval(() => {
            element.innerText  = word[j];
            j  ;
            if(j === word.length) {
              clearInterval(interval)
            }
          }, 200)      
        });
      };
      word();
      return;
    }

html {
      box-sizing: border-box;
    }

    *,*::before, *::after {
      box-sizing: inherit;
    }

    body {
      margin: 0;
    }


    .wrapper {
      width: 100%;
      background-color: #333;
      color: #FFA;
      text-align: center;
      height: 100vh;
      display: flex;
      flex-direction: row;
      gap: 10rem;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
    }

    .text-wrapper {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      gap: 3rem;
      flex-direction: column;
      justify-content: center;
      justify-content: space-around;
    }

    .button {
      font-size: 3rem;
      border-radius: 6px;
      background-color: #47cefa;
    }

    .button:hover {
      cursor: pointer;
      background-color: #BCEF4D;
    }

      <section >
        <button >Create Element</button>
        <button >Start Animation</button>
      </section>

CodePudding user response：

Instead of setInterval in a loop of the array, just create a recursive function that calls setTimeout and calls itself and increments the array counter until the end of the array.

The lay out of my answer is off because I'm not exactly sure on what your expected layout is

const wrapper = document.querySelector(".text-wrapper");
const buttonAnimate = document.querySelector(".animation");
buttonAnimate.addEventListener("click", animation);

let i = 0;

let sampleArray = ["Just", "another", "cool", "heading"];

function animation() {
  if (i < sampleArray.length) {
    let el = document.createElement("p");
    el.innerHTML = sampleArray[i];
    wrapper.appendChild(el);
    i  ;
    setTimeout(animation, 200);
  }
}

.wrapper {
  width: 100%;
  background-color: #333;
  color: #FFA;
  text-align: center;
  height: 100vh;
  display: flex;
  flex-direction: row;
  gap: 10rem;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
}

.text-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  gap: 3rem;
  flex-direction: column;
  justify-content: center;
  justify-content: space-around;
}

.button {
  font-size: 3rem;
  border-radius: 6px;
  background-color: #47cefa;
}

.button:hover {
  cursor: pointer;
  background-color: #BCEF4D;
}

<section >
  <button >Start Animation</button>
  <div ></div>
</section>