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

Category: Animation , Javascript , Text | September 7, 2018
Views Total:689 views
Official Page:Go to website
Last Update:September 7, 2018


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.

  .type('String 1')
  .changeOps({ deleteSpeed: 80 })
  .type('String 2')
  .type('String 3')
  .changeOps({ deleteSpeed: 20 })
  .type('String 34')

You Might Be Interested In:

Leave a Reply