Download TypeMe

How to install

Import JavaScript file: <script src="src/typeme-min.js"></script>

How to use

const myTypeMe = new TypeMe({ elem: "#myElement, .myElements", strings: ["String1", "String2"], }); myTypeMe.start();

And you're done. Watch the plugin animate typing!

> If the plugin detects multiple elements, the animation will be mirrored on them.

Properties

typeSpeed: int - Animation typing speed (Default: 70)

backspaceSpeed: int - Animation backspacing speed (Default: 20)

pauseAfterFullstop: int - Amount of time the animation will wait after full stop in a string (Default: 500)

loop: bool - Loop animation (Default: false)

stopOnLastString: bool - Skip backspacing last string after finished typing (Default: true)

animationStartDelay: int - Delay before the animation starts (Default: 750)

typeStartDelay: int - Delay before each sentence starts being typed out (Default: 500)

backspaceStartDelay: int - Delay before each sentence starts being backspaced (Default: 500)

onBegin - Callback function that runs after the animation has started

onStringFinished - Callback function that runs after typing out each string

onComplete - Callback function that runs after the animation is complete

Cursor properties

cursorID: string - Adds the ID to the cursor element

cursorClass: string - Adds the class name to the cursor element

cursor: string - Sets the cursor element (Default: "|")

cursorRemoveOnAnimationComplete: boolean - Removes the cursor on animation completion

cursorAnimationSpeed: int - Number of times cursor blinks in a second (Default: 2)

> If the animation is used on an input element, the cursor won't be displayed!

const myTypeMe = new TypeMe({ elem: "#myElement, .myElements", strings: ["String1", "String2"], properties: { typeSpeed: 70, backspaceSpeed: 20, pauseAfterFullstop: 500, loop: false, stopOnLastString: true, animationStartDelay: 750, typeStartDelay: 500, backspaceStartDelay: 500, onBegin: () => console.log("animation started"), onStringFinished: () => console.log("string finished"), onComplete: () => console.log("animation complete"), }, cursorProperties: { cursorID: "typingCursorID", cursorClass: "typingCursorClass", cursor: "|", cursorRemoveOnAnimationComplete: true, cursorAnimationSpeed: 2, }, }); myTypeMe.start();

Try it

Properties

Type speed: 70ms
Max:
Backspace speed: 20ms
Max:
Fullstop pause: 500ms
Max:
Animation start delay: 750ms
Max:
Type start delay: 500ms
Max:
Backspace start delay: 500ms
Max:
Loop Stop on last string

Cursor properties

Cursor: |

Cursor animation speed: 2
Max:
Remove cursor on animation complete

let tryIt_animationInstance = new TypeMe({ elem: "#tryIt_p", strings: [ "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "Nam vel congue lacus. Duis a nisl nec dui sollicitudin condimentum a pellentesque ante.", "Etiam viverra sit amet tortor non maximus.", "Pharetra vulputate ex, eu convallis lectus posuere eu.", ], properties: { typeSpeed: 70, backspaceSpeed: 20, pauseAfterFullstop: 500, loop: false, stopOnLastString: false, animationStartDelay: 750, typeStartDelay: 500, backspaceStartDelay: 500, }, cursorProperties: { cursor: "|", cursorRemoveOnAnimationComplete: false, cursorAnimationSpeed: 2, }, });

TypeMe.js

How to install

How to use

Properties

Cursor properties

Try it

Properties

Cursor properties

Methods