Animate Type of Effect Through The List of Strings

Write and Delete is a small js library to trigger some writing effects through the list of strings. It also supports typos settings, to make them more bearable for a human. This JavaScript library simulates realistic human writing behavior on the web.

Note Generators are used, so they are only supported in modern browsers.

Features:

Classify by group of strings.
infinite loop.
Custom share of typos.
The indicator flashes.

Must Read: jQuery Plugin That Formats JSON Strings | jsonFormatter

How to make use of it:

1. Import the Write and Delete.

<script src="dist/lib.js"></script>
// or as a web component
<script src="dist/webcomponent.js" defer></script>

2. Initialize the library and outline an array of strings to be printed on the web page.

writeAndDelete(document.querySelector("#container"), [
  "Text to type 1",
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // options here
});

3. You can even use it as a web element.

<write-and-delete>String1, String2, String3, String4</write-and-delete>

4. Possible options to config the typing animation.

writeAndDelete(document.querySelector("#container"), [
  `Text to type 1`,
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // timeout in ms
  timeout: 1000,
  // animation speed
  speed: 300,
  // variation for the speed option
  speedVariation: undefined,
  // infinite loop
  loop: true,
  // quota of typos
  errorQuota: 0
  // Custom string of characters used for the typo errors
  errorCharacterMap: undefined,
  // custom cursor
  cursor: '_',
  // speed of binking animation
  cursorSpeed: undefined,
});

// or 
<write-and-delete timeout="1000" loop="true" speed="200">String1, String2, String3, String4</write-and-delete>

Options

Must Read: Translate Strings In Any Elements & Attributes Using Vanilla JS | Simple Translator

Property	Type	Description
timeout	`number`	`required` Timeout until the next element is been written/deleted
speed	`number`	`required` The velocity of typing effect
speedVariation	`number`	A variation for the `speed` property. So it is not too linear
loop	`boolean`	Restart after reaching the last text in the list
errorQuota	`number`	The quota of typos injected into the text
errorCharacterMap	`string`	A custom string of characters is used for the typo errors.
cursor	`string`	The character of the cursor like `/` or `_`
cursorSpeed	`number`	Speed of the blinking animation