Hello you, I'm a typing effect!

What I'm doing different compared to other typing effects is that I reserve the space of the animated text. That way other elements on the page don't jump when the text container changes its size while typing.
And centered text is possible as well.
As well as line-breaks. Even bold text or other tags.

In this demo, multiple elements are animated after another.
You can control the typing speed as well as the delay between two animated elements.

Every character gets wrapped in a span. When the animation is done, the containers are removed and the initial state is restored. Some fonts are rendered differently, when characters are wrapped in a tag, especially when ligatures are turned on. Because of that, you might see an unlovely effect where your text moves when the animation is done. To avoid that you can disable restoring of the initial state.

I return a Promise. So, when I'm done, you can do something like: