⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element.

Demo

Size (It's really tiny)

• Minimized: 2.9KB
• Gziped: 1.1KB

Installation

Library can be easily installed via either NPM or Bower:

npm i tinytyper --save

OR

bower i tinytyper --save

Usage

Basic setup looks like this:

import TinyTyper from 'tinytyper';

const el       = document.querySelector('.text-el')
const options  = { /* . . . */ }
const instance = new TinyTyper(el, options)

In case you need to run animation again:

instance.animate()

Available options:

Option | Default | Description ------------- | -------------|-------------- text | innerText of specifed element | Sets a text to be displayed textSpeed | 95 | Defines of text speed animation cursor | ▌ | Defines current cursor symbol blinkSpeed | 0.05 | Defines blink speed of a cursor cursorClass | tiny-typer-cursor | A CSS class for cursor element textClass | tiny-typer-text | A CSS class for text element staticCursor| false | Makes cursor static (disables blinking) staticText | false | Makes text static (disables animation)

Contributions

Contributions are welcome. Feel free to create issues and PRs