Typewriter JS - A simple yet powerful native javascript plugin for a cool typewriter effect.

Typwriter JS v2

A simple yet powerful native javascript plugin for a cool typewriter effect.

  • Simple
  • Fast
  • Easy to apply
  • No dependencies
  • Tiny - 4kb minified & gZipped

Example

Methods (All methods can be chained together)

Name Paramater Description
typeString('string'); String Adds string characters to event queue for typing.
deleteAll(); None Add delete all characters to event queue.
deleteChars(2); Number Add delete character to event queue for amount of characters provided.
pauseFor(1500); Number Add pause event to queue for ms provided.
callFunction(callback, thisArg); Callback - Function, thisArg - this object to bind Add an event item to call a callback function.
start(); None Use to start the event loop. This can be put at the end of a series of method chains to start the loop. Alternatively the autoStart option can be used.
stop(); None Use to stop the event loop.
pause(); None Use to pause the event loop.

Options

Option Type Default Description
strings Array of Strings False An array of strings which will be typed out one by one.
cursor String | Symbol for the cursor as string.
delay Number 'Natural' This the time it takes for the character to be added to the DOM. Default is 'natural' which is a keyword to represent a random number.
loop Boolean False Whether it should loop through the series of events.
autoStart Boolean False Whether the script should automatically type out the array of strings provided. It will type each one and then remove then before typing the next string.
devMode Boolean False This will log every action to the console, helpful if the plugin is not working for you and you need to see what it is doing.
wrapperClassName String Typewriter__wrapper This is the class name which is added to the span tag which wraps around all the character elements in the DOM.
cursorClassName String Typewriter__cursor This is the wrapper class for the cursor element.