For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to a single character, enabling you to type an dynamic narrative, with complete control over speed changes, line breaks, deletions, and pauses.
See some more examples and try out the sandbox here.
Using TypeIt for an open source or personal project is completely free. To use it in a commercial project, purchase a single license, or an unlimited license that'll never expire, no matter how many times you use it.
npm install typeitor
yarn install typeitand import into your project with
import TypeIt from 'typeit'.
yarn installand then
yarn run build. The compiled source files will be in the
Either load it via
script tag, or import.
Create a new TypeIt instance, pass a reference to element, and define your options.
// The simplest example'.type-it'strings: 'This is my string!';
Here is a string.
See more on that in the Companion Functions section.
To define multiple strings, either use
<br> tag to separate them in your target element, or pass an array into the instance you create.
Here is a string. And here is another!
'.type-it'strings: 'Enter your string here!' 'Another string!';
By default, multiple strings will break lines (breakLines: true). However, you can also set them to delete and replace each other.
'.type-it'strings: 'Enter your string here!' 'Another string!'breakLines: false;
TypeIt is fully prepared to handle HTML in your strings, so it's easy to style a portion of what you type, or just do something like bold a couple of words.
Tags must be one level deep and be inline elements.
'.typeit-box'strings: '<h1 class="your-class">This is a string!</h1>';
ASCII HTML entities must begin with & and end with ;
'.typeit-box'strings: '<h1 class="your-class">I really ♥ Life cereal.<h1>';
To control a typewriter effect to the smallest character, pause, speed, or more, there companion functions available. Simply chain them together on an instance of TypeIt, and your chain will execute. You'll be able to create a dynamic, realistic narrative with just a few lines of code.
|type()||(string) Characters (including those wrapped in HTML) to be typed.||Will type the characters. If instance has already begun, will add the typing action to the end of the queue.|
|delete()||(number) Number of characters to be deleted from what's already been typed.||Will delete the specified number of characters. If left empty, will delete all of what's been typed.|
|empty()||(none)||Will instantly delete everything that has already been typed.|
|pause()||(number) Number of milliseconds to pause before continuing.||Will pause the specified number of milliseconds.|
|break()||(none)||Will break the typing to a new line.|
|options()||(JSON) Options you'd like to update||Will redefine your options on the fly. This will only work for updating the
|destroy()||(bool) Whether you want to remove the cursor after destroying. Default is
||Destroys the instance on whatever elements to which it's attached.|
|freeze()||none||Will pause/freeze an instance.|
|unfreeze()||none||Will resume an instance.|
You may use these functions to generate a queue of typing events immediately upon creating the instance. This is probably the more common way of using these methods.
'.type-it'speed: 900lifeLike: falseautoStart: falsetype'I am typing slowly,'optionsspeed: 100type'but now I am typing pretty fasst'type't!';
Additionally, you may use these functions to manipulate an instance after it's been created. A common use case for this is pausing and resuming an instance.
var instance = '#element'strings: "This is what I'm choosing to type right now.";//-- Pause after one second.;//-- Resume after three seconds.;
This is also helpful if you want your typing to respond to user action of any sort.
var instance = '#element';document;
You can also use the
type() function to add more strings onto the queue at a later time. If the instance has already finished, the string will be added to the queue and typed when it's time.
var instance = '#element'strings: "What I'm first going to type.";instancetype"I just decided to add this on too, but it won't be typed until the active queue has finished.";
At any moment, you may check if the instance is complete. Access the 'isComplete' property to do so. If
loop is set to
true, the instance will never be marked complete.
var instance = '#element' /* options... */ ;ifinstanceisComplete//-- Do something.
You can modify the options for the plugin by passing in JSON upon instantiation.
|strings||(string or array) The string(s) to be typed.||'Your default string.'|
|speed||(number in millseconds) The typing speed.||100|
|deleteSpeed||(number in millseconds) The deletion speed. If left undefined, will be 1/3 of the type speed.||undefined|
|lifeLike||(boolean) Will make the typing pace irregular, as if a real person is doing it.||true|
|cursor||(boolean) Show a blinking cursor at the end of the string(s).||true|
|cursorSpeed||(number in milliseconds) The blinking speed of the cursor.||1000|
|cursorChar||(string) The character used for the cursor. HTML works too!||pipe|
|breakLines||(boolean) Choose whether you want multiple strings to be printed on top of each other (
|nextStringDelay||(number in milliseconds or array) The amount of time (milliseconds) between typing the next string when multiple strings are defined. You may either pass a number in milliseconds, or an array of values. The first value will be used as the delay before a new string starts, and the second value will be used as the delay after a string ends. For example, passing
|startDelete||(boolean) Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions.||false|
|startDelay||(number in milliseconds) The amount of time before the plugin begins typing after initalizing.||250|
|loop||(boolean) Have your string or strings continuously loop after completing.||false|
|loopDelay||(number in milliseconds) The amount of time between looping over a string or set of strings again.||750|
|html||(boolean) Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally.||true|
|callback||(function) A function that executes after your typing has completed.||nuthin'|
If you're creating several instances of TypeIt on a page, and don't wish to repeatedly set an option of the same value for each of them, you can redefine the default options beforehand. Change the default value(s) before creating any instances, and you'll be set.
windowTypeItDefaultsspeed = 50;//-- This and all following instances will now have a default speed of 50.'#id'strings: 'A string!';
I have a few CodePen examples that illustrate how to do some interesting things with TypeIt.
Please do! The code is available on Github. Check out the CONTRIBUTING.md file to see how to get started.
GPL-2.0 © Alex MacArthur