Create Animated Typing Of Text With JavaScript – Typeinit

Category: Animation , Javascript | March 11, 2024
Views Total:46 views
Official Page:Go to website
Last Update:March 11, 2024


Create Animated Typing Of Text With JavaScript – Typeinit


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 i typeinit
// ES 6+
import Typeinit from "typeinit";
// Browser
<script src=""></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.;

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,

7. API methods.

typeinit.type(text: string)
typeinit.delete(numToDel?: number | undefined, deleteOptions?: DeleteOptionsInterface | undefined)
typeinit.deleteAll(ease?: boolean | undefined, deleteAllOptions?: DeleteAllOptionsInterface | undefined)
typeinit.pause(ms?: number | undefined)
typeinit.newLine(numOfLines?: number | undefined)


v1.3.2 (03/11/2024)

  • Converted the mode in delete() to lowercase and added shorter modes aliases: ‘c’ & ‘w’ for ‘char’ and ‘word’ respectively

v1.3.1 (01/14/2023)

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

You Might Be Interested In:

Leave a Reply