Skip to content
⌨️ A tiny library for creating a typing effect on specified text element.
Branch: develop
Clone or download
Latest commit 8267302 Feb 3, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
lib Removed logic-less Symbol library in order to reduce library size Nov 5, 2016
src
test
.babelrc Update dependencies; update npm scripts (lint, pretest tasks added) Oct 26, 2016
.editorconfig
.eslintrc
.gitignore Initial commit Oct 26, 2016
.travis.yml
LICENSE
README.md Fixed typo in README.MD Feb 3, 2017
bower.json
package.json Prepaired package.json for releasing Nov 5, 2016
webpack.config.js

README.md

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.