Search code examples
javascripttextnewlineeffects

How to go to new line in Type Writer effect?


I have an effect of Type Writing in JavaScript for my #effect, I want the text to be typed in new lines where I've used \n in the textEffect variable, but the whole text is just typed consecutively, no matter I've declared \ns in some places,

how do I make my textEffect type in new lines?

let x = 0;
let textEffect = "Hi, \n I'm Dorothy, \n\ have a good day!";
let container = document.getElementById("effect");

function animate() {
    if(x < textEffect.length){
        container.innerHTML += textEffect.charAt(x);
        x++;
        setTimeout(animate, 80);
    }
}
animate();
<div id="effect"></div>


Solution

  • style white-space: pre-line; needed.

    let x = 0;
    let textEffect = "Hi, \n I'm Dorothy, \n\ have a good day!.";
    let container = document.getElementById("effect");
    
    function animate() {
        if(x < textEffect.length){
            container.innerHTML += textEffect.charAt(x);
            x++;
            setTimeout(animate, 80);
        }
    }
    animate();
    <div id="effect" style="white-space: pre-line;"></div>