Typewriter Style Text Rotation Library – Typist

Preview:

Description:

Typist is a simple, flexible,framework-agnostic JavaScript library used for rotating through a list of text with a customizable typing animation.

How to use it:

Add the JavaScript file Typist into your html page.

<script src="dist/typist.js"></script>

Wrap the text separated with comma into an inline element such as strong.

I Love <strong id="typist-element" data-typist="AngularJS,ReactJS,Vue.js">JavaScript</strong>

Initialize the Typist with several options.

var typist;
typist = document.querySelector('#typist-element');
new Typist(typist, {
  letterInterval: 60,
  textInterval: 3000
});

Style the selected text.

.selectedText {
  background: #f00;
}

More configuration options:

new Typist(typist, {
 
  // Miliseconds between typing a letter
  letterInterval: 60,
  // Miliseconds between text rotation
  textInterval: 3000,
  // Select element class name
  selectClassName: 'selectedText',
  // Callback when the slide changes, returns two arguments `text` (current textvariation) and `option` (an object of variables that might be of use, like the `slideIndex` or the typist element itself)
  onSlide: null
  
});