CODEWITHSUNDEEP
javascripttextnewlineeffects
TheClassyCoder
TheClassyCoder

Reputation: 103

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>

Upvotes: 0

Views: 1933

Answers (1)

Jejun
Jejun

Reputation: 410

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>

Upvotes: 2

Related Questions