Basic Features

Configuration Basics

new Typeinit(selector: string | HTMLElement, optionsObj?: OptionsInterface | undefined): Typeinit

The Typeinit constructor accepts two arguments:

selector: The target element where text will be typed. This can be a DOM node or a CSS selector (class, ID, etc.). For example, all of the examples below will work.
```
new Typeinit('#element', {...});
new Typeinit('.element', {...});
new Typeinit(document.querySelector('h2'), {...});
new Typeinit('[data-attribute="element"]', {...});
```
NoteIf a selector that applies to several elements on the page is used, only the first element found will be targeted
optionsObj: An object that customizes the behavior of the instance.

Configuration Options

You can customize an instance by passing an object with any of the following properties as the second argument to the Typeinit's constructor

new Typeinit(".element", {
  // optionsObj go here!
}).play();

Option & Default value	Description
`typingSpeed: 100`	`number` Typing speed in milliseconds.
`deletingSpeed: 40`	`number` Deleting speed in milliseconds.
`startDelay: 0`	`number` Time before typing starts in milliseconds.
`deleteDelay: 300`	`number` Time before deleting in milliseconds.
`pause: 1000`	`number` The amount of time in milliseconds to pause.
`repeat: 0`	`number\|"infinite"` The number of times the animation should be repeated.
`repeatEase: false`	`boolean` If set to `true`, applies an effect before repeating.
`repeatSpeed: 0`	`number` The speed in milliseconds it takes to delete all characters in the element before repeating.
`repeatDelay: 750`	`number` Time before each repeat starts in milliseconds.
`caret: true`	`boolean` Determines if a caret should be shown.
`caretColor: "currentcolor"`	`string` Styles the color of the caret.
`caretWidth: 1`	`number` Styles the width of the caret. It is measured in `px` unit.
`waitUntilVisible: false`	`boolean` If set to `true`, the animation will start only when the element is within the viewport.
`visibleOptions: "center bottom"`	`string` Configures when the element becomes visible. Possible values are: `"top top"` \| `"top center"` \| `"top bottom"` \| `"center top"` \| `"center center"` \| `"center bottom"` \| `"bottom top"`\| `"bottom center"` \| `"bottom bottom"`. The first value is relative to the element while the second is relative to the viewport. By default, the element becomes visible when the center of the element touches the bottom of the viewport.

Hard-Coded in HTML

You can hard-code the text you wish to animate in your target element by including it in the element. This is extremely useful for those looking to optimize SEO.

<div class="element">This text will be typed on page load.</div>

NoteThis approach may cause a flash of text before the instance is started. This is because the text will already be rendered on the page before Typeinit has a chance to parse it for the animation.

Callback Methods

There are methods in the optionsObj which will fire at particular points in the execution of the animation.

new Typeinit(".element", {
  /**
   * Before it begins typing
   */
  onStart: () => {},

  /**
   * All typing is complete
   * NOTE: If "reset" is set to "infinite", this will never fire.
   */
  onEnd: () => {},

  /**
   * After reset
   */
  onReset: () => {},

  /**
   * After each character is typed
   */
  onCharTyped: () => {},

  /**
   * After each character is deleted
   */
  onCharDeleted: () => {},
});