How to animate a typing text effect in javascript

Question

Written some script to give the effect of typing text but I want each character to fade in. Ive tried adding x.style.opacity and getting the element by Id but this changes the whole thing is there any way to target the individual characters? Here is my code:

var i = -1; 
var string = "BREAKING NEWS "
var array = string.split("");   


function Next(){
i++;   
if(i > (array.length - 1)){      
    i = 0;                            
}
setTimeout('Slide()',50);
 }


 function Slide(){
x = document.getElementById('test')
x.innerHTML += array[i];

setTimeout('Next()',50);

}

can't fade in text itself, wrap letters in span tags and fade those in — charlietfl, May 25 '14 at 19:28

score 1 · Accepted Answer · answered May 25 '14 at 19:39

1

You can't target single characters you need to wrap them in a tag, like span:

DEMO

function Slide() {
    var sp = document.createElement('span');
    sp.setAttribute('class', 'fadein');
    sp.appendChild(document.createTextNode(array[i]));
    x.appendChild(sp);
    setTimeout('Next()', 50);
}

and you can animate them with css animations

.fadein {
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

answered May 25 '14 at 19:39

Quad

1,708
1
10
22

Copied answer from your jsfiddle but its not working properly its doubling up each character, any ideas why? – user3533049 May 25 '14 at 20:31
do you still have the problem? note that i slightly changed your code, especially Next function decl, you may want to revert that change. – Quad May 25 '14 at 21:02
Yeah still having the problem, thanks for the help its given me a lot to think about if I fix it ill post it. – user3533049 May 25 '14 at 23:21
Works great know I was calling the Next() function onload as well – user3533049 May 26 '14 at 10:40

How to animate a typing text effect in javascript

1 Answers1