How can I repeat an animation after changing the text inside the element?

Question

I have an text element (HTML) that plays an animation when the page loads and I'm trying to create a script to change the original text to a different one and then play the same animation. Here is part of my code:

setTimeout(function typewriter() {
    let txt;
    let themes = document.getElementById("themes");
    txt = "Games";
    themes.innerText = txt;
    themes.classList.add("changer");
}, 4000);

.typewriter h1 {
    color: #ffffff;
    background-color: #000000a8;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    font-size: 35px;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #333333; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: 
      typing 2s steps(30, end),
      blink-caret .5s step-end infinite;
}
.changer {
    animation: typing 2 s steps(30, end),blink - caret .5 s step - end infinite;
}
/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
  
/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #333333 }
}

<div class="typewriter">
    <h1 id="themes">Science</h1>
</div>

The problem is that after 4 seconds when the text changes I can't play the animation again. Can anyone help me, please? Thank you.

Answer 1

I found a solution using JavaScript to increase the width of the element from 1% to 100%! Here is my JavaScript code:

var texts = [];

//Add a counter
var curr = 0;

//Store in array
texts.push("Games");
texts.push("Science");

setInterval(function() {
    let txt;
    //Change the texts array value with curr variable (the Counter)
    txt = texts[curr];
    let themes = document.getElementById("themes");
    themes.innerText = txt;

    var width = 0;
    var id = setInterval(frame,10);
    function frame(){
        if(width >= 100){
            clearInterval(id);
        } else {
            width++;
            themes.style.width = width + "%";
        }
    }

    //Change the counter variable
    curr += 1;

    //Change the counter to the start of the array
    if(curr >= texts.length) curr = 0;
}, 4000);

Thank you for the help!

Answer 2

First, you are using setTimeout (This is wrong) If you want it to repeat the function, you should use setInterval.

Second, you are changing the same "Text" every time you call the function, which is "Games". If you want it to change to a certain text, you need to store it first in an array,

var texts = [];

//Add a counter
var curr = 0;

//Store in array
texts.push("Games");
texts.push("Science");

setInterval(function() {
    let txt;
    //Change the texts array value with curr variable (the Counter)
    txt = texts[curr];
    let themes = document.getElementById("themes");
    themes.innerText = txt;
    themes.classList.add("changer");

    //Change the counter variable
    curr += 1;

    //Change the counter to the start of the array
    if(curr >= texts.length) curr = 0;
}, 4000);

In my case, the animation doesn't work. But if you want to change the text for every 4s, this code will help you.

You can add any number of text that you want.