A small library for creating typing animations.
View a short video demonstration here.
npm i tiper-js
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.
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 is
wordsPerMinute: number: - A number used to determine typing speed. Default is
pauseTimeout: number: - The time in ms to pause on certain conditions. Only applies if
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 if
showCaretis 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.
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.