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: