Controllable Text Typing Animation In Pure JavaScript – Typeplay.js

Preview:

Description:

Typeplay.js is a vanilla JavaScript library to create text typing animations with support for wait, erase, repeat, etc.

How to use it:

Install the package with NPM.

# NPM
$ npm install typeplay --save

Import the module.

import TypePlay from 'typeplay';

Initialize the TypePlay on a specific container.

const element = document.getElementById("typeContainer");
let typer = new TypePlay(element);

Type something in the container element with the following methods.

• wait: Make the script wait before next action
• eraseAll: Erases all characters before the cursor
• erase: Erases N characters before the cursor
• repeat: Repeats the sequence of actions

typer
  .wait(2500)
  .eraseAll()
  .type("Helo World!")
  .erase(8)
  .wait(70)
  .type("lo World!")
  .wait(620)
  .type(" Check my source code..")
  .wait(10000)
  .repeat()
  .play();
})();

Config the typing/deleting speed.

let typer = new TypePlay(element,{
     typeSpeed: { min: 140, max: 220 }, 
     delSpeed: { min: 50, max: 90 }
});