&nbps;

Instance Methods

A handful of chainable and non-chainable instance methods are also available to reign full, detailed control over an instance you create.

Chainable Methods

These methods must be used before the .go() method is called on your instance. For example:

// This will work!
new TypeIt("#element", {
  speed: 50,
})
  .type("Helo!")
  .pause(500)
  .move(-2)
  .type("l")
  .go();

// This will NOT work!
const instance = new TypeIt("#element", {
  speed: 50,
})
  .type("Helo!")
  .go();

instance.pause(500).move(-2).type("l");

.type()

instance.type(string: string | Function, actionOptions?: ActionOptions);

Type the string that's passed.

instance.type("My string!").go();

A string can be defined via function as well. For example:

instance.type(() => "My string from a function!").go();

.delete()

instance.delete(numberToDelete?: number | string | () => number | string, actionOptions?: ActionOptions);

Delete the number characters passed.

// Delete five characters.
instance.delete(5).go();

If left empty or null, everything that's been typed will be deleted:

// Delete everything.
instance.delete().go();

Alternatively, you can pass a CSS selector to determine how far a deletion will span.

// Delete up until the <strong> element is deleted.
instance
  .type('Jack and <strong class="name">Jill</strong> went up the hill')
  .delete(".name")
  .go();

By default, passing a selector will delete until the "start" of the target element. To only delete up until the end of the target element, pass END in the to option.

// Delete up until right before the <strong> element.
instance
  .type('Jack and <strong class="name">Jill</strong> went up the hill')
  .delete(".name", { to: "END" })
  .go();

.pause()

instance.pause(milliseconds: number | (() => number), actionOptions?: ActionOptions);

Pause the number (in milliseconds) passed.

// Pause for 500 milliseconds.
instance.pause(500).go();

If left blank, no pause will be inserted. Just calling that out.

// There will be no pause. Why are you doing this?
instance.pause().go();

.break()

instance.break(actionOptions?: ActionOptions);

Insert a <br> tag.

// A <br> will be inserted.
instance.type("A").break().type("B").go();

.options()

instance.options(options: Options, actionOptions?: ActionOptions);

Update options on the fly. This will only impact options that are actively used during queue execution, which currently includes speed, lifeLike, and html.

instance.options({ speed: 500, lifeLike: false }).go();

.empty()

instance.empty(actionOptions?: ActionOptions);

Instantly wipe out the contents of the target element.

instance.empty().go();

.move()

instance.move(
  movementArg: number | string | null | (() => string | number | null),
  actionOptions?: ActionOptions
);

Move the cursor backward or forward a certain number of characters. This can be accomplished by passing a number:

// Move the cursor five characters back.
instance.move(-5).go();

// Move the cursor seven characters forward.
instance.move(7).go();

Alternatively, you can pass a CSS selector to move the cursor to a particular typed element in the animation.

// Move the cursor to the beginning of the <strong> element.
instance.type("Jack and <strong>Jill</strong> went up the hill").move(-5).go();

By default, passing a selector will move the cursor to the "start" of the target element. To move it to the end of the element, pass END in the to option.

// Move the cursor to the END of the <strong> element.
instance
  .type("Jack and <strong>Jill</strong> went up the hill")
  .move(-5, { to: "END" })
  .go();

If null or no argument is passed, the cursor will be moved to the beginning of the element, unless changed with the to option.

// Move the cursor to the start of the element.
instance.type("Hello.").move().go();

.exec()

instance.exec(func: () => any, actionOpts?: ActionOpts);

Fire any arbitrary function wherever this is placed in the queue. This method is asyncronous, so you may configure it to completely pause the queue's execution until a returned Promise is made to resolve.

instance.exec(async () => await doSomethingAsync()).go();

Tweaking Options Per Action

Many of the above methods allow optional configuration to be defined for controlling how individual actions behave.

Insert Delay After Instance Method

Instead of inserting .pause() after each action, you can set a delay after any given action is fired. For example:

// This will work!
new TypeIt("#element", {
  speed: 50,
})
  .type("Hello!", { delay: 2000 })
  .delete(null, { delay: 1000 })
  .type("Goodbye!")
  .go();

Instantly Executing an Action

The type(), delete(), and move() methods accept an instant option that will cause the action to be executed immediately, rather than waiting one character at a time. This is useful, for example, when you'd like to type a longer amount of text instantly, in order to simulate a terminal effect.

// This will work!
new TypeIt("#element", {
  speed: 50,
})
  .type("Hello!", { instant: true }) // Type instantly.
  .delete(null, { instant: true }) // Delete everything instantly.
  .type("Hi, again!")
  .move(null, { instant: true }) // Move instantly to the beginning.
  .go();

Non-Chainable Methods

The following methods are intended to be used after an instance has been initialized and kicked off with go():

.destroy()

instance.destroy(removeCursor?: boolean);

Use the .destroy() method to cancel all timeouts and destroy an instance. Running this method will update the status of the instance to destroyed and remove cursor from DOM. If false is passed, the cursor will not be removed.

const instance = new TypeIt("#myElement", {
  strings: "This will be destroyed.",
}).go();

instance.destroy();

.reset()

instance.reset();

Use the .reset() method to reset an active instance to a brand new state.

const instance = new TypeIt("#myElement", {
  strings: "Some strings and stuff.",
}).go();

instance.reset();

.freeze() / .unfreeze()

instance.reset();

Use the .freeze() and .unfreeze() methods on a active instance to pause and resume its execution any time.

new TypeIt("#myElement", {
  strings: "After 500ms, pause for 3 seconds and resume.",
}).go();

setTimeout(() => {
  instance.freeze();

  setTimeout(() => {
    instance.unfreeze();
  }, 3000);
}, 500);

.is()

instance.is(status: started | complete | frozen | destroyed);

Use the .is() method to check the current status of an instance at any time. Available statuses to check include started, complete, frozen, and destroyed. A boolean will always be returned.

let instance = new TypeIt('#myElement', {...});

instance.is('started');
instance.is('completed');
instance.is('frozen');
instance.is('destroyed');