Fork me on GitHub

Ractive.js typewriter transition plugin

download: Ractive-transitions-typewriter.js more plugins at ractivejs.org/plugins

This transition 'writes' characters onto the page one at a time, hiding and showing child elements as necessary.

It will attempt to prevent words 'jumping' at the end of each line as they are written, by adding non-breaking whitespace to the end of the current word so that it wraps onto the next line where it will eventually live. This isn't perfect, especially with non-monospace fonts, but it looks more or less okay if the speed isn't too slow.

If you use text-align: right or text-align: center on an element, it's recommended to set the display style to inline-block, so that the plugin can calculate dimensions in advance.