Simple Typewriter Effect In Pure JavaScript – TypewriterJS

Preview:

Description:

TypewriterJS is a native javascript plugin that can be used to create an elegant automatic typewriter animation effect on websites.

See also:

• 10 Best Text Animation JavaScript & CSS Libraries

How to use it:

Load the main JS file typewriter.js right before the closing body tag.

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

Create a placeholder element:

<div id="demo"></div>

Initialize the library on the element and specify an array of strings to type out.

var demo = document.getElementById('demo');
var typewriter = new Typewriter(demo, {
    strings: ['Strings', 'To', 'Type']
});

Available API methods to control the typing animation.

// starts the typing animation
typewriter.start()
// Stops the animation
typewriter.stop()
// Time to pause for in milliseconds
typewriter.pauseFor(ms)
// String to type out
typewriter.typeString(string)
// Paste out a string
typewriter.pasteString(string)
// Deletes all strings
typewriter.deleteAll()
// Deletes a amount of characters
typewriter.deleteChars(number)
// callback
typewriter.callFunction(cb);
// Changes thedeleting speed
typewriter.changeDeleteSpeed(speed);
// Changes the delay 
typewriter.changeDelay(delay);

All configuration options to customize the typing animation.

var typewriter = new Typewriter(demo, {
    strings: ['Strings', 'To', 'Type'],
    cursor: '|',
    delay: 'natural', // 'natural' or Number
    loop: false, // infinite loop
    autoStart: false,
    devMode: false,
    wrapperClassName: 'Typewriter__wrapper',
    cursorClassName: 'Typewriter__cursor',
});

Changelog:

06/29/2022

• v2.19.0: update

09/17/2021

• v2.18.2: Build and publish v2.18.2

06/13/2021

• v2.18.0: Upgrade packages

11/24/2020

• v2.17.0: Remove onStringTyped as onCreateTextNode can be used to achieve the same result

11/20/2020

• v2.14.0: Add method to create text nodes, fix unit tests

05/01/2020

• v2.13.1: Respect deleteSpeed when looping through strings

03/10/2020

• v2.13.0: Bugfix

09/18/2019

• v2.12.1: Fix issue with nested html string not typed out correctly and cursor not changing back to initial on loop

07/29/2019

• v2.10.0: Fix issue with event loop causing start of loop to be delayed

06/30/2019

• v2.8.2: Removing un-used code to reduce bundle size

06/29/2019

• v2.7.1: Fix issue with nested html string not typed out correctly and cursor not changing back to initial on loop

06/19/2019

• v2.6.0: Adding change_cursor event/functionality

06/17/2019

• v2.5.4: Update

03/17/2019

• v2.5.3: Fixing issue with not deleting nodes in IE11

12/04/2018

• v2.5.2: Fixing issue with delete chars and loop

12/03/2018

• v2.5.1: Fixed issue with increasing exponentially times

11/21/2018

• v2.4.4: Fixed IE11 issues

09/20/2018

• v2.4.4: Added ability to change typing delay

09/16/2018

• v2.3.3: Updated options & API.

09/11/2018

• v2.2.0: Remove all characters before re-starting loop

08/27/2018

• v2.0.0