&nbps;

new TypeIt("#hero", {
  speed: 50,
  startDelay: 900
})
  .type("the mot versti", {delay: 100})
  .move(-8, {speed: 25, delay: 100})
  .type('s')
  .move('START')
  .move(1, {delay: 200})
  .delete(1)
  .type('T')
  .move(12, {delay: 200})
  .type('a', {delay: 250})
  .move('END')
  .type('le animated typing utlity')
  .move(-4)
  .type('i')
  .move('END')
  .type(' on the internet', {delay: 400})
  .delete(8, {delay: 600})
  .type('<em><strong>planet.</strong></em>');
  .go();

"It is literally the easiest JS plugin I've ever used." - Brian

  • ~4kb gzipped
  • no dependencies
  • super flexible API
  • SEO-friendly

Unmatched Flexibility

Type a simple string.

At it's most basic level, just target an element, define a string, and voilà.

Type multiple strings.

To type multiple strings that stack on top of each other, pass an array of them.

Type into form elements.

Target any input or textarea like any other element, and you're set.

Fire code at key points of any animation.

Callback methods are available for before and after each string or character is typed, as well as after the entire instance is finished.

Type dynamic, life-like effects.

Use the included instance methods to control the smallest details, including speed, deletions, pausing, and even cursor movement.

Fire any arbitrary code whenever.

If the provided callback methods aren't enough, the included `.exec()` method allows you to fire code at any point during the animation, and is async-friendly.

Pause & resume on demand.

Included `freeze()` and `unfreeze()` methods make it easy.

Every Option You Might Need

For a full description of each option, see here.

Easy Setup & Installation

#1

Load on page.

Load the script with a script tag (a CDN link is available).

<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>

Or, run npm install typeit and import the module.

import TypeIt from "typeit";
#2

Configure & go.

Choose an element to target, define what to type, pick your other options, and kick it off.

new TypeIt("#element", {
  strings: "This is my string!",
  speed: 75,
  loop: true
}).go();

Available in Multiple Flavors

For easy usage in a wide variety of projects, TypeIt's ready to go in multiple different packages. Purchase a license, and you get to choose which implementation is best for your needs.

Pricing

Limited Commercial License

$19

Use TypeIt on a single commercial project. Includes lifetime updates.

Purchase License

Unlimited Commercial License

$44

Unlimited use on any commercial project. Includes lifetime updates.

Purchase License