Write and Delete

Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more human likely.

Note It uses generators, so it's only supported in more modern browsers.

Demo

Codepen

Usage

JavaScript

Import the library

<script src="https://unpkg.com/write-and-delete@VERSION/dist/lib.js"></script>

and then it's available in the global window scope.

  writeAndDelete(document.querySelector("#header"), [
    "Buenos dias",
    "Good morning",
    "Guten Morgen ",
    "Buon giorno",
], {
    timeout: 1000,
    loop: true,
    speed: 200,
    errorQuota: 0.5,
    cursor: '_',
    cursorSpeed: 300,
});

Web Component

this library is also available as a webcomponent.

Import the component

<script src="https://unpkg.com/write-and-delete@VERSION/dist/webcomponent.js"></script>

and then set it up in your markup

<h1>
    <write-and-delete timeout="1000" loop="true" speed="200">JavaScript, HTML5, CSS3</write-and-delete>
</h1>

Options

Property	Type	Description
timeout	number	required Timeout until next element is been written/deleted
speed	number	required 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	Quota of typos injected in the text
errorCharacterMap	string	Custom string of characters used for the typo errors.
cursor	string	Character of the cursor like / or _
cursorSpeed	number	Speed of the blinking animation