DEV Community

Cover image for Simple writing text animation
Andrea Canton
Andrea Canton

Posted on Edited on Originally published at andreacanton.dev

Simple writing text animation

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?

Top comments (2)

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 •

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