A small library for creating typing animations.
View a short video demonstration here.
Installation
npm i tiper-js
Usage
Initialization is really simple. Just create a new instance of Tiper and pass in a DOM element. The options object is optional.
//ES6; //ES5let Tiper = ; let tiper = document; tiper; //Begins typing with default text and config.tiper // Types "Hello, neighbor!". Also uses default config.
If you want to have the blinking cursor affect, link the css file in your html file like so:
Checkout the test folder for a basic, viewable example.
Options
Tiper exposes a minimal, yet fun, set of options to play around with.
text: string
(required) - The string of text to be typed.hesitation: number
- A number from 0 to 1. Used as a factor in determining the delay between typing the next character. Default is0.45
.wordsPerMinute: number
: - A number used to determine typing speed. Default is40
.pauseTimeout: number
: - The time in ms to pause on certain conditions. Only applies ifpauseOnSpace
orpauseOnEndOfSentence
is true.pauseOnSpace: boolean
: - Whether or not to pause on spaces. Default is false.pauseOnEndOfSentence: boolean
: - Whether or not to pause at the end of sentences. Default is true.showCaret: boolean
: - Whether or not show caret. Default is false.caretType: string
: - The type of caret to show ifshowCaret
is true. Available options are 'normal' or 'underscore'. Default is 'normal'.glitch: boolean
: - Whether or not to show glitch effect intermittently.onFinishedTyping: Function
: - The callback to fire after the text has been typed.
Methods
typer.beginTyping(text: string, reset: boolean)
- Begin typing at the current index. Returns a Promise that resolves when all the text has been typed.typer.stopTyping()
- Stop typing at the current index. Returns a Promise that resolves when async interval is cleared.typer.line(text: string)
- Output a single line of text. Returns a Promise that resolves when the particular text is finished being displayed.