Why cant I animated multiple text with JS

Kuri 0
Viewed 37

So I'm trying to do this vanilla text animation with JS and CSS but when I apply it to more that one text it work only on the fist one. I follow this tutorial: https://www.youtube.com/watch?v=GUEB9FogoP8&t=687s

It works but only on one text element. I saw the same animation on a portfolio of https://www.fromluke.com Which is even cleaner, but he used a different method.

Thanks for your tips!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="text-test.css">
</head>
<body>

    <div class="c-contaier">
        <di class="first">
            <h1 class="fancy">Hi,I'm</h1>
        </di>
        <h1 class="fancy">Super Mario</h1>
    </div>

    <script src="app.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Outfit', sans-serif;
}

body {
    background-color:white;
    
}

h1{
    color:black;
    font-size: 140px;
    text-align:left;
    font-weight: 500;
    text-transform: uppercase;
    overflow: hidden;
}

span{
    opacity: 0;
    transform: translateY(200px);
    transition: all 0.8s ease;
    display:inline-block;
}

span.fade{
    opacity: 1;
    transform: translateY(0px);
}



.space{
    width:24px;
    height: 5px;
    position: relative;
}

.c-container {
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 4rem;
    padding-left: 4rem;
}

const text = document.querySelector('.fancy');
const textString = text.textContent;
const splitText = textString.split("");
text.textContent = "";

for (let i=0; i < splitText.length; i++) {
  if (splitText[i] === " ") {
    text.innerHTML += "<span class='space'>" + splitText[i] + "</span>";
  } else {
    text.innerHTML += "<span>" + splitText[i] + "</span>";
  }
}

let char = 0;
let timer = setInterval(onTick, 40);

function onTick() {
  if (char < splitText.length) {
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
    char++;
    if (char === splitText.length) {
      complete();
      return
    }
  }
}
animation text javascript css html
3 Answers

If you use document.querySelector, JavaScript will return an array containing all elements that match the query. However, if you wish to perform an action on each element you've returned, you'll need to use the JavaScript foreach function.

In your case, JavaScript currently processes the first element of the returned array and stops afterways. To fix this, use:

const text = document.querySelector('.fancy');

text.forEach(item){
    const textString = item.textContent;
    const splitText = textString.split("");
    item.textContent = "";

    for (let i=0; i < splitText.length; i++) {
      if (splitText[i] === " ") {
        item.innerHTML += "<span class='space'>" + splitText[i] + "</span>";
      } else {
        item.innerHTML += "<span>" + splitText[i] + "</span>";
      }
}

As you can see, I've moved the logic you're using to animate the item to within the forEach function.

The document.querySelector('.fancy'); will return an array containing elements that match the query.

The forEach function which is called on text - the array containing the elements that matched the quesry of document.querySelector - will use item to refer to the iterated element.

Kay Angevare0

I noticed an issue in your script, you're only selecting one element instead you need to use this :

querySelectorAll('.fade')

const allTextArray = document.querySelectorAll('.fancy');
for (let j = 0; j < allTextArray.length; j++) {
    let text = allTextArray[j]
    const textString = text.textContent;
    const splitText = textString.split("");
    text.textContent = "";

    for (let i = 0; i < splitText.length; i++) {
        if (splitText[i] === " ") {
            text.innerHTML += "<span class='space'>" + splitText[i] + "</span>";
        } else {
            text.innerHTML += "<span>" + splitText[i] + "</span>";
        }
    }

    let char = 0;
    let timer = setInterval(onTick, 400);

    function onTick() {
        if (char < splitText.length) {
            const span = text.querySelectorAll('span')[char];
            span.classList.add('fade');
            char++;
            if (char === splitText.length) {
              complete();
              return
            }
        }
    }
}

Ali Tasawar0

And if your goal is to start second text after last one is done, you cannot do this by my previous implementation as the for loop will never wait for

setInterval()

So, to implement this you will use the following code :

const allTextArray = document.querySelectorAll('.fancy');
let j=0;
(animatedText=()=>{
    let text = allTextArray[j]
    text.style.display="block"
    const textString = text.textContent;
    const splitText = textString.split("");
    text.textContent = "";

    for (let i = 0; i < splitText.length; i++) {
        if (splitText[i] === " ") {
            text.innerHTML += "<span class='space'>" + splitText[i] + "</span>";
        } else {
            text.innerHTML += "<span>" + splitText[i] + "</span>";
        }
    }

    let char = 0;
    let timer = setInterval(onTick, 400);

    function onTick() {
        if (char < splitText.length) {
            const span = text.querySelectorAll('span')[char];
            span.classList.add('fade');
            char++;
            if (char === splitText.length) {
                j++;
              animatedText();
              return
            }
        }
    }
})()
.fancy{
    display: none;
}

Ali Tasawar0
Related