A Simple JavaScript Plugin for Cool Typewriter Effect

TypewriterJS is a simple but powerful native JavaScript plugin for a great typewriter effect. This JavaScript plugin can be used to create a neat automated animation effect on websites.

javascript typewriter effect, jquery typewriter effect, typing and erasing animation css, typewriter js, multiline typewriter effect, typewriter effect css

How to make use of it:

Load the primary JS file typewriter.js right earlier than the closing body tag.

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

Create a placeholder component:

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

Initialize the library on the component 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 strategies to manage 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',
});

Simple Typewriter Effect In Pure JavaScript, TypewriterJS Plugin/Github, typewriter js cdn, js typewriter effect multiple lines