typeit

TypeIt: The Most Versatile jQuery Animated Typing Plugin on the Planet

---

Table of Contents

• Overview
• Choose a License
• Setup
• Simple Usage
• Advanced Usage (Chaining Companion Functions)
• Options
• Contributions
• Documentation (offsite)

---

Overview

TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.

For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to tweak your typing down to the smallest character, enabling you to type not just a few strings of text, but an entire narrative, with complete control over speed, characters, line breaks, deletions, pauses, everything.

Some of the Perks

• Choose to start typing only when your element becomes visible on the screen.
• Loop your string(s) continuously.
• Define you strings via JSON or in the HTML (useful in case user doesn't have JavaScript enabled).
• Create several unique instances on a single page.
• Handle HTML tags (including those with classes, ID's, etc.) and entities with ease.
• Use companion functions to chain individual commands together to fine tune your typing.
• Supported by jQuery 1.8.0 or higher.
• Lightweight. (~5kb, single JavaScript file)

Demos

Checkout several demos and a sandbox where you can try it out at macarthur.me/typeit.

Documentation

View the full documentation for using TypeIt here: macarthur.me/typeit/docs.

Choose a License

To get started, first select a license:

• Personal - FREE
• Single Commercial License - Purchase Here
• Extended Commercial License - Purchase Here

Setup

Get the Code

Get it from this repo, or from the following sources:

• CDN: Include https://cdn.jsdelivr.net/jquery.typeit/4.0.0/typeit.min.js on your page.
• npm: Install with npm install typeit.

Hook It Up

1. Load jQuery and typeit.js on your page.

<script src="jquery-2.1.4.min.js"></script>
<script src="typeit.js"></script>

1. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. More on that later.)

<span class="type-it"></span>

You're ready to start typing!

Simple Usage

In it's simplest use, just call typeIt() on any element and include your options.

Example:

  $('.type-it').typeIt({
    strings: ['Enter your string here!', 'Another string!']
  });

Advanced Usage

To control your typing down to the smallest character, there are five companion functions available to use. Simply chain them together following a typeIt() call on an element, and your chain will execute. You can define your global settings within the function call like usual, and can even change settings on the fly throughout the chain.

For example:

  $('.type-it').typeIt({
    speed: 900,
    lifeLike: false,
    autoStart: false
  })
  .tiType('I am typing slowly,')
  .tiSettings({speed: 100})
  .tiType('but now I am typing pretty fasst')
  .tiDelete(2)
  .tiType('t!');

Companion Functions

Function	Arguments	Description
tiType()	(string) Characters (including those wrapped in HTML) to be typed.	Will type the characters.
tiDelete()	(number) Number of characters to be deleted from what's already been typed.	Will delete the number of
tiPause()	(number) Number of milliseconds to pause before continuing.	Will pause the specified number of milliseconds.
tiPause()	(number) Number of milliseconds to pause before continuing.	Will pause the specified number of milliseconds.
tiBreak()	(none)	Will break the typing to a new line.

Options

You can modify the options for the plugin by passging in JSON.

There are a number of options you may use to customize typeIt.

Option	Description	Default Value
strings	The string(s) to be typed.	'Your default string.'
speed	The typing speed.	100
lifeLike	Will make the typing pace irregular, as if a real person is doing it.	true
cursor	Show a blinking cursor at the end of the string(s).	true
cursorSpeed	The blinking speed of the cursor.	1000
breakLines	Choose whether you want multiple strings to be printed on top of each other (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false).	true
breakDelay	The amount of time between typing multiple strings.	750
startDelay	The amount of time before the plugin begins typing after initalizing.	250
loop	Have your string or strings continuously loop after completing.	false
loopDelay	The amount of time between looping over a string or set of strings again.	750
html	Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally.	true

Contributions

This project is setup with Gulp to lint & minify the JavaScript. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js, npm, and Gulp are installed on your computer):

npm install
gulp develop

Donations

If I've made your life eaiser in some way by creating this thing and want to kick a small "thank you" my way, I'd very much appreciate it!

PayPal: paypal.me/alexmacarthur

Venmo: venmo.com/amacarthur