Simple Typewriter Effect In Pure JavaScript – TypewriterJS

Category: Animation , Javascript , Recommended , Text | September 20, 2018
Author: tameemsafi
Views Total: 2,910
Official Page: Go to website
Last Update: September 20, 2018
License: MIT

Preview:

Simple Typewriter Effect In Pure JavaScript – TypewriterJS

Description:

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

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)

// 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:

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

Leave a Reply