luisvinicius167 / ityped

Dead simple Javascript animated typing, with no dependencies.
https://ityped.surge.sh/
MIT License
2.33k stars 128 forks source link

Force line breaks - Possible? #21

Open srikat opened 7 years ago

srikat commented 7 years ago

Hello,

Is it possible to make the following work?

strings:['I don\'t want just words.<br/>If that\'s all you have for me, you\'d better go.<br/>F. SCOTT FITZGERALD'],

When I try the above, <br/>s can literally be seen being typed on the page and then once the typing finishes, they go away.

Is it possible to prevent all instances of <br/> from being typed, yet parsed in the HTML?

i.e., simulate the following sequence: animate the typing of a sentence, hit return, another sentence, hit return etc.

srikat commented 7 years ago

Almost managed with

<h1><span id="ityped1"></span><br/><span id="ityped2"></span><br/><span id="ityped3"></span></h1>

and

<script>
    ityped.init('#ityped1', {
        strings:["I don't want just words."],
        typeSpeed: 110, // 55 is the default
        onFinished: function(){
            document.querySelector('.ityped-cursor').style.visibility = 'hidden';

            ityped.init('#ityped2', {
            strings:["If that's all you have for me, you'd better go."],
            typeSpeed: 110, // 55 is the default
            onFinished: function(){
                document.querySelector('.ityped-cursor').style.visibility = 'hidden';

                ityped.init('#ityped3', {
                strings:["F. SCOTT FITZGERALD"],
                typeSpeed: 110, // 55 is the default
                onFinished: function(){
                    document.querySelector('.ityped-cursor').style.visibility = 'hidden'
                }
            });
            }
        });
        }
    });
</script>

The problem is that blinking cursor does not go away for 2nd and 3rd lines after the text has been typed.

luisvinicius167 commented 6 years ago

Hi, sorry for long response! I will try implement this!