Animate Text To Another With A Typing Effect – TypedText.js

Preview:

Description:

TypedText.js is a plain JavaScript library that animates your text to another content with typewriter-like typing/deleting effects.

How to use it:

Import the JavaScript file TypedText.js into the document.

<script src="TypedText.js"></script>

Initialize the library and we’re ready to go.

runTT()

Wrap the original text into a container with the CSS class of TT.

<h1 class="TT">
  Text To Animate
</h1>

Specify the content the text will animate to.

<h1 class="TT"
    data-tt-to="Text To Type">
    Text To Animate
</h1>

Add a delay to the text animation.

<h1 class="TT"
    TT-to="Text To Type"
    data-tt-delay-ms="300">
    Text To Animate
</h1>

Specify the interval between keystrokes.

<h1 class="TT"
    TT-to="Text To Type"
    data-tt-interval-ms="30">
    Text To Animate
</h1>

Changelog:

05/11/2019

• switched to use data attributes