⌨️ 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
