How to Easily Create a Text Typewriter Effect with JavaScript

[@LagrangePoint0]

This was a great tutorial! I had achieved this effect before but in a much more complicated and inefficient way.

[@bedtimehorrorstoryyoutube]

Simple and effective 😀 Thank you!

[@istbl3480]

Thanks!

[@dcode-software]

You're welcome! Thank you for the Super Thanks 💪 appreciate it

[@LFG04]

this is a very easy and good way of doing a typewriter effect, good job and thanks!

[@MichaelShingo]

I'm curious, is there is an advantage to doing this recursively vs. iteratively?

[@euVicodes]

amazing thank you so much. how can i make it repeat alone ?

[@danushadhaamarasekera7215]

Thanks brother, may god bless you

[@mariners_platter]

where can I get 'Lexend' font? Is that a Google Font?

[@frankdrolet9439]

Love your tutorials, you should do more advanced front-end stuff

[@kibels894]

Did you notice the bug at the end where there's invalid unicode put to the screen for a second until the full unicode character has been output? Making it work smoothly with unicode would be an interesting video.

[@neontuts5637]

Awesome! That's a cool trick to create a text-typing effect. Thanks for sharing. How to add a cursor at the end and after text typing is completed that cursor should blink.

[@spkim0921]

.text{
overflow: hidden;
border-right: .05em solid orange;
white-space: nowrap;
animation:
blink-caret .75s step-end infinite;
}
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}

[@euVicodes]

how can add this to a project of mine? i´m trying but it´s not working

[@davidpainzug5810]

thank you so much bro

thank you bro

[@hiboktalampak1473]

i use opera gx. every time i type in there, there is this clacking sound. i like it. how to do that with js?

[@MichaelShingo]

Add a keyboard event listener and have it trigger a sound. Tone.js is a good library to play sounds with javascript.

[@Uncaught_in_promise]

Cute. What if I want this effect to loop endlessly?

[@Imam.Mehdi_]

Just add typeTypeEffect(element,text) in if(text ===length-1)

[@suelingsusu1339]

Nice!!🌹👌👍🙏🖖🖖🖖

[@HAZ0517]

Doesn't work for me >.>

[@lewisli3672]

dope

[@oladitiabiodun]

Please how can I make the text infinitely repeat