Easy Lightweight Typing Effect Library – myTypewriter.js

Preview:

Description:

myTypewriter.js is a fast, lightweight JavaScript library that lets you create a text carousel effect with typewriter-like typing & erasing animations.

How to use it:

1. Install and import the typeWriter module.

# NPM
$ npm i my-typewriter
import { typeWriter } from './src/myTypewriter.js';

2. Create an empty element with the unique ID ‘my-typewriter’ on the page.

<span id="my-typewriter"></span>

3. Initialize the typeWriter and define an array of strings you want to loop through.

typeWriter({
  texts: ["jQueryScript", "CSSScript", "VueScript"],
})

4. Config the typing & erasing animations.

typeWriter({
  texts: ["jQueryScript", "CSSScript", "VueScript"],
  // pause in milliseconds
  letterPause: 1200,
  // typing speed
  typeSpeed: 0,
  // erasing speed
  eraseSpeed: 100,
  // binking speed (cursor)
  blinkSpeed: 300,
  // default animation speed
  speed: 200,
})