Create Animated Typing Of Text With JavaScript – Typeinit

Preview:

Description:

Typeinit is a tiny typing animation library that provides the functionality to create an animated typing of text. With this library, you can create awesome typewriter animation effects for your text within seconds.

How to use it:

1. Install and import the Typeinit.

# NPM
$ npm i typeinit

// ES 6+
import Typeinit from "typeinit";

// Browser
<script src=”https://cdn.jsdelivr.net/npm/typeinit/dist/index.umd.js”></script>

2. Create a container in which the text should print.

<div class="element"></div>

3. Initialize the Typeinit and define the text to be typed in the container you just created.

const typeinit = new Typeinit(".element");

typeinit.type("Hello world!")

4. Start the typing animation.

typeinit.play();

5. Config the typing animations.

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",
  
})

6. Callback functions.

Typeinit(".element", {
  /**
   * Before it begins typing
   */
  onStart: undefined,
  /**
   * All typing is complete
   */
  onEnd: undefined,
  /**
   * After reset
   */
  onReset: undefined,
  /**
   * After each character is typed
   */
  onCharTyped: undefined,
  /**
   * After each character is deleted
   */
  onCharDeleted: undefined,
  
})

Changelog:

v1.3.1 (01/14/2023)

• Changed the former ‘reset()’ api to ‘restart()’ and added a new api ‘reset()’