DEV Community

loading...
Cover image for Simple writing text animation

Simple writing text animation

andreacanton profile image Andrea Canton ・1 min read

I just tried to create a simple writing text animation using css and vanilla javascript.

The text indicator is pure css using @keyframes in loop. The writing effect is done by using a setInterval.

An improovement that it came to my mind is to change the interval every time and increment to one second if I encounter a period.

Do you think I can do better?

Discussion

pic
Editor guide
Collapse
noclat profile image
Nicolas Torres

Nice, simple. Indeed you could do better randomizing the speed, and to this you'd need to switch from interval to timeout. On top of randomizing the delay, you could also add a multiplier for some characters, like space would be faster, special chars would be slower, and with that you'll get a more natural effect :).

Collapse
andreacanton profile image
Andrea Canton Author

The multiplier for some characters it's a great idea!!! Thank you!