Controllable Text Typing Animation In Pure JavaScript – Typeplay.js

Category: Animation , Javascript | January 25, 2019
Views Total:173 views
Official Page:Go to website
Last Update:January 25, 2019


Controllable Text Typing Animation In Pure JavaScript – Typeplay.js


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 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
  .type("Helo World!")
  .type("lo World!")
  .type(" Check my source code..")

Config the typing/deleting speed.

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

You Might Be Interested In:

Leave a Reply