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

Category: Animation , Javascript , Text | September 7, 2018
Author: ChrisCavs
Views Total: 396 views
Official Page: Go to website
Last Update: September 7, 2018
License: MIT

Preview:

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

Description:

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()

You Might Be Interested In:


Leave a Reply