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

Typwriter JS

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)

NameParamaterDescription
typeString('string');StringTypes the given string out.
deleteAll();NoneDeletes all the characters inside of the element
deleteChars(2);NumberDeletes the amount of characters provided by the paramater. It starts from the end of the displayed string.
pauseFor(1500);NumberThe number of milliseconds to pause before starting the next method in the chain.
changeSettings();ObjectChange the options to the new options provide through an object. Can be used in a chain to change the typing speed for example before proceeding.
start();NoneUse 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.
rerun();NoneCan be used at the end of a chain of methods to loop through it again. It can also be used when you want to rerun the loop when a user clicks replay a button.

Options

OptionTypeDefaultDescription
Element (First Param of constuctor)DOM ElementNoneThis is a DOM element that you want the typewriter effect to be displayed in. If using jQuery you need to add [0] to the element - $('#element')[0].
stringsArray of StringsFalseAn array of strings which will be typed out one by one.
autoStartBooleanFalseWhether 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.
cursorClassNameString'typewriter-cursor'This is the wrapper class for the cursor element.
cursorString'|'This is the character that represents the cursor.
animateCursorBooleanTrueWhether the cursor element should blink or not.
blinkSpeedNumber50The rate at which the cursor blinks. Higher is faster.
typingSpeedNumber'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.
deleteSpeedNumber'Natural'This is the time it takes before each character is removed from the DOM. Default is 'natural' which is a keyword to represent a random number.
charSpanClassNameString'typewriter-char'This is the class name which is added to the span tag of each character.
wrapperClassNameString'typewriter-wrapper'This is the class name which is added to the span tag which wraps around all the character elements in the DOM.
loopBooleanFalseWhether it should loop through the series of events.
devModeBooleanFalseThis 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.