Flexible Text Typing Effect In Vanilla JavaScript – malarkey

Preview:

Description:

malarkey.js is a vanilla JavaScript plugin to create flexible text typing/deleting effects just like the typewriter.

How to use it:

Installation.

# Yarn
$ yarn add malarkey
# NPM
$ npm install malarkey --save

Include the compiled version of the malarkey.js on the web page.

<script src="malarkey.js"></script>

Create a container where you want to print out the text.

<div class="typewriter"></div>

Initialize the malarkey library and we’re ready to go.

malarkey()

Start typing your text with the following methods.

malarkey()
  .type('CSS') // type
  .pause() // pause
  .delete() // delete
  .type('Script')
  .pause()
  .delete()

Options and callback functions:

const element = document.querySelector('.typewriter')
function callback (text) {
  element.textContent = text
}
const options = {
      typeSpeed: 50,
      deleteSpeed: 50,
      pauseDuration: 2000,
      repeat: false
}
malarkey(callback, options)

Full API methods.

malarkey()
  // type 
  .type(string, options)
  // pause
  .pause(options)
  // delete
  .delete(characterCount, options)
  // clear
  .clear()
  // calls the given fn function.
  .call(fn)
  // stops the sequence
  .triggerStop(fn)
  // resumes the sequence
  .triggerResume()
  // returns true if the sequence is currently stopped
  .isStopped()