Fully Configurable Text Typing Animation In Pure JavaScript – TyperJS

Preview:

Description:

TyperJS is a lightweight (~2kb) JavaScript library that applies fully configurable typing/deleting animations to the given text.

How to use it:

Download and import the TyperJS into the document.

<!-- For Modern Browsers -->
<script src="/path/to/js/typer.es6.min.js"></script>
<!-- For Cross Browsers -->
<script src="/path/to/js/typer.min.js"></script>

Create a container to place the text.

<div class="example"></div>

Initialize the Typer and define the text you want to print.

var typer = new Typer({
    elem: '.example',
    typeText: 'text to print'
});

It also supports print an array of text.

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"]
});

Specify the number of repeats. Default: 0 (infinite).

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"],
    repeat: 3
});

Set the interval between characters while typing. Default: 100ms.

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"],
    interval: 200
});

Set the animation delay. Default: 0.

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"],
    delay: 2000
});

Determine whether to show the cursor while typing. Default: true.

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"],
    typingLine: false
});

Determine whether to delete the text when reaching the repeat limit.  Default: false.

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"],
    deleteOnFinish: true
});

Determine whether to hide the cursor when reaching the repeat limit.  Default: true.

var typer = new Typer({
    elem: '.example',
    typeText: ["First text", "Second text"],
    hideLineOnFinish: false
});

Play/pause the typing animation.

typer.play();
typer.pause();

Reload the library with new options.

typer.reload(newOptions);

Destroy the library.

typer.destroy();