Typeinit

An Intuitive JavaScript Typing Animation Library

The problem

There are typing animation libraries available out there but most are really difficult to use. This can be frustrating when you want to get an animation up really quickly.

This solution

Typeinit is a javascript typing animation library which is easy and intuitive to use. It is a plug and play library which produces really smooth animations without headaches.

Features

  • Offers a chainable API for ease of use.
  • Choose to delay the animation until the target element becomes visible on the screen.
  • Define strings to type programmatically or in the HTML (a useful fallback in case the user doesn't have JavaScript enabled, as well as for SEO).
  • Style the color of the caret with any CSS color syntax (gradients work too 😋).
  • Responsive: the caret shrinks or grows in relation to the font size specified.
  • Fire callback functions when a character is typed, deleted, or when repeating.

Installation

via NPM

npm install typeinit

via CDN

<script src="https://cdn.jsdelivr.net/npm/typeinit@1.3.1/dist/index.umd.js"></script>
HTML

Setup

javascript (ES6+)

After NPM installation

import Typeinit from "typeinit";

new Typeinit(".element").type("Hello world!").play();
JavaScript

javascript (ES5+)

With CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Typeinit</title>
  </head>
  <body>
    <div class="element"></div>
    <!-- Typeinit CDN -->
    <script src="https://cdn.jsdelivr.net/npm/typeinit@1.3.1/dist/index.umd.js"></script>
    <script>
      const typeinit = new Typeinit(".element");
      typeinit.type("Hello world!").play();
    </script>
  </body>
</html>
HTML

Customization

const typeinit = new Typeinit(".element", {
  /**
   * @property {number} startDelay time before typing starts in milliseconds
   */
  startDelay: 0,

  /**
   * @property {number} typingSpeed typing speed in milliseconds
   */
  typingSpeed: 100,

  /**
   * @property {number} deletingSpeed deleting speed in milliseconds
   */
  deletingSpeed: 40,

  /**
   * @property {number} deleteDelay time before deleting in milliseconds
   */
  deleteDelay: 300,

  /**
   * @property {number} pause the amount of time in milliseconds to pause
   */
  pause: 1000,

  /**
   * @property {(number|"infinite")} repeat repeat animation
   * @property {boolean} repeatEase apply an effect before repeating
   * @property {number} repeatSpeed the speed in milliseconds it takes to delete all characters in the element before repeating
   * @property {number} repeatDelay time before each repeat in milliseconds
   */
  repeat: 0,
  repeatEase: false,
  repeatSpeed: 0,
  repeatDelay: 750,

  /**
   * @property {boolean} caret show caret
   * @property {string} caretStyle color applied to the caret element
   * @property {string} caretWidth the width of the caret
   */
  caret: true,
  caretColor: "currentcolor",
  caretWidth: 1,

  /**
   * @property {boolean} waitUntilVisible Start the animation only when the element is within the viewport
   * @property {string} visibleOptions configure when the element becomes visible
   */
  waitUntilVisible: false,
  visibleOptions: "center bottom",

  /**
   * Before it begins typing
   */
  onStart: () => {},

  /**
   * All typing is complete
   */
  onEnd: () => {},

  /**
   * After resetting the Target element
   */
  onReset: () => {},

  /**
   * After restarting the animation
   */
  onRestart: () => {},

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

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

Documentation

All of Typeinit's documentation can be found at https://typeinit-docs.vercel.app.

GitHub

https://github.com/eroblaze/typeinit