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

Demo

Installation

Library can be easily installed via either NPM or Bower:

npm i tinyptyper --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