MoreLesson 264Free preview

Typewriter

This lesson is part of How To · All levels

Summary

The typewriter effect shows text one character after another so it feels like it's being typed. JavaScript takes the string cut with slice() and updates it using setTimeout or setInterval. Add a flash cursor via CSS, but don't make this effect the only way to convey important information.

Key points

Slice(0, i) takes some of the text according to the position of the character being typed.
The recursive setTimeout pauses between characters and makes it easier to stop.
Flash cursors can be created with pseudo-elements and CSS animation.
The typing effect should not be used for important content and should respect reduced motion.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.