Awesome Open Source
Awesome Open Source

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

npm version JavaScript Style Guide Build Status Dependency Status

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

License

MIT


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,965
typing (39