TypedText.js

---

TypedText.js is a JavaScript library to create dynamic text with a typing effect.

Animated text elements will transition from the inner content to the content defined in a custom attribute. Animation delay and keystroke interval are customizable via data attributes as well.

It uses plain ES.

---

Usage:

1: Link the script anywhere in your page.

<script type="text/javascript" src="TypedText.js"></script>

2: Mark the elements you want to animate with the TT class, and the data-tt-to attribute.

<p
  class='TT'
  data-tt-to="This is some awesome text.">
  This is some boring text.
</p>

3: Call runTT() to animate! Put this after the elements you wish to animate.

<script type="text/javascript">
  runTT()
</script>

Features:

Delay: By default, TypedText.js executes animations immediately. You can add the data-tt-delay-ms attribute to force the script to wait a set number of milliseconds before running on that particular element. Ex:

<p
  class='TT'
  data-tt-to="Oh boy that took a while"
  data-tt-delay-ms="3000">
  I'll start animating in 3 seconds!
</p>

Interval: The interval between "keystrokes" is set with data-tt-interval-ms like so (in milliseconds):

<p
  class='TT'
  data-tt-to="I'm the fastest text in the west"
  data-tt-interval-ms="30">
  I'm the...
</p>

Interval defaults to 60ms

Typos (not yet accessible): TypedText can simulate stray keypresses and misclicks. The final text will be the same, but mistakes will appear in the typing process (an be corrected).

Other:

TypedText can also be applied more specifically by passing a selector to runTT(). This function uses querySelectorAll() to find the desired elements, so be sure to prepend your class and id names with the appropriate prefix ('.class', '#id'). Additionally, you may choose to use the TypedText class directly. Check out the source code for more information.

Clone the repository and open index.html for a quick demo.