Inline Typing Animation Component – typewritten-text

Preview:

Description:

typewritten-text is a Custom Element that applies an accessible, configurable typing effect to inline text.

How to use it:

1. Install and import the typewritten-text component.

# NPM
$ npm i @auroratide/typewritten-text --save

import '@auroratide/typewritten-text/lib/style.css'
import '@auroratide/typewritten-text/lib/define.js'

2. Or directly load the necessary stylesheet and JavaScript in the document.

<link rel="stylesheet" href="/lib/style.css" />
<script type="module" src="/lib/define.js"></script>

3. Wrap your text into the <typewritten-text> custom element as follows:

CSSScript <typewritten-text>A JavaScript & CSS Website.</typewritten-text>

4. Determine whether to repeat the typing animation.

<typewritten-text repeat>A JavaScript & CSS Website.</typewritten-text>

5. Set the number of milliseconds between each letter.

<typewritten-text letter-interval="500">A JavaScript & CSS Website.</typewritten-text>

6. Determine the time to wait before repeating the typing animation.

<typewritten-text repeat phrase-interval="5000">A JavaScript & CSS Website.</typewritten-text>

7. Determine whether to pause the typing animation until invoked by javascript.

<typewritten-text paused>A JavaScript & CSS Website.</typewritten-text>

8. API methods.

const element = document.querySelector('typewritten-text');
// start
element.start();
// pause
element.pause() 
// type the next character
element.typeNext()
// remove one character
element.backspace()
// run one frame of the typing animation
element.tick() 
// run one frame of the animation regardless of paused state
element.forceTick()
// reverse the direction of the animation
element.reverse() Reverse the direction of the animation
// reset
element.reset()

9. Properties.

element.repeat
element.paused
element.letterInterval
element.phraseInterval

10. Events.

element.addEventListener("typewritten-text:started", function(){
  // do something
});
element.addEventListener("typewritten-text:paused", function(){
  // do something
});
element.addEventListener("typewritten-text:nextchar", function(){
  // do something
});
element.addEventListener("typewritten-text:prevchar", function(){
  // do something
});
element.addEventListener("typewritten-text:phrasetyped", function(){
  // do something
});
element.addEventListener("typewritten-text:phraseremoved", function(){
  // do something
});