Typewriter Style Text Rotation Library – Typist

Category: Javascript , Recommended , Text | July 11, 2016
Views Total:1,041 views
Official Page:Go to website
Last Update:July 11, 2016


Typewriter Style Text Rotation Library – Typist


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


You Might Be Interested In:

Leave a Reply