Custom Typewriter Effect In Nativie JavaScript – T-Writer.js

Yet another typewriter effect library in native JavaScript.

The T-Writer.js library lets you print out any strings with configurable typing/deleting/resting effects.

How to use it:

Install & Import.

$ npm install t-writer.js --save

import Typewriter from 't-writer.js'

Create a container in which you want to type the text.

<div class="example"></div>

Initialize the T-Writer.js with optional settings.

const example = new Typewriter(target, {
      // infinite loop
      loop: false,
      // animated cursor
      animateCursor: true,
      // blinking speed
      blinkSpeed: 400,
      // typing speed
      typeSpeed: 90,
      // deleting speed
      deleteSpeed: 40,
      
      // min/max speed
      typeSpeedMin: 65,
      typeSpeedMax: 115,
      deleteSpeedMin: 40,
      deleteSpeedMax: 90,
      // default classes
      typeClass: 'type-span',
      cursorClass: 'cursor-span',
      // default colors
      typeColor: 'black',
      cursorColor: 'black'
      
})

Print out your text with the following API.

writer
  .type('String 1')
  .rest(500)
  .changeOps({ deleteSpeed: 80 })
  .remove(4)
  .type('String 2')
  .rest(500)
  .remove(4)
  .type('String 3')
  .rest(500)
  .changeOps({ deleteSpeed: 20 })
  .remove(21)
  .type('String 34')
  .rest(500)
  .clear()
  .start()