Terminal Style Text Print Animation In JavaScript – tinytyper

Preview:

Description:

tinytyper is a simple, tiny, standalone JavaScript library that animates your text character by character just as someone typing something in a terminal or on a typewriter.

How to use it:

1. Install and import the tinytyper as an ES module.

# NPM
$ npm install tinytyper --save

import TinyTyper from 'tinytyper';

2. Or include the UMD version on the HTML page.

<script src="./lib/tinytyper.js"></script>

3. Initialize the plugin on a placeholder in which you want to print the text. That’s it.

var el= document.querySelector('.container')
var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com'
}
var instance = new tinytyper(el, options)

4. Customize the blinking cursor displayed at the end of the text while typing.

var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com',
    cursorClass: 'tiny-typer-cursor',
    cursor: ' ▌'
}

5. Customize the animation speed. Default: 95.

var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com',
    textSpeed: 100
}

6. Override the default wrapper class.

var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com',
    textClass: 'tiny-typer-text'
}

7. Re-animate the text.

instance.animate()