Controllable Text Typing Animation In Pure JavaScript – Typeplay.js

Category: Animation , Javascript | January 25, 2019
Author:stoilivanov
Views Total:169 views
Official Page:Go to website
Last Update:January 25, 2019
License:MIT

Preview:

Controllable Text Typing Animation In Pure JavaScript – Typeplay.js

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 }
});

You Might Be Interested In:


Leave a Reply