Flexible Text Typing Effect In Vanilla JavaScript – malarkey

Category: Animation , Javascript | March 27, 2018
Author: yuanqing
Views Total: 583 views
Official Page: Go to website
Last Update: March 27, 2018
License: MIT


Flexible Text Typing Effect In Vanilla JavaScript – malarkey


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

How to use it:


# Yarn
$ yarn add malarkey

$ 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.


Start typing your text with the following methods.

  .type('CSS') // type
  .pause() // pause
  .delete() // 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.


  // type 
  .type(string, options)

  // pause

  // delete
  .delete(characterCount, options)

  // clear

  // calls the given fn function.

  // stops the sequence

  // resumes the sequence

  // returns true if the sequence is currently stopped

You Might Be Interested In:

Leave a Reply