Simple Typewriter Effect In Pure JavaScript – TypewriterJS

Category: Animation , Javascript , Recommended , Text | June 30, 2019
Author: tameemsafi
Views Total: 4,205
Official Page: Go to website
Last Update: June 30, 2019
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.

See also:

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:

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

You Might Be Interested In:


Leave a Reply