DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Simple writing text animation
Andrea Canton
Andrea Canton

Posted on • Updated 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!

We're hiring!

We're Hiring

We're looking for a Senior Full Stack Engineer to join the DEV team.

Head here to learn more.