Luigi Cavalieri - Authoring Open Source Code

CharWriter.js: Typing-like Animations in Vanilla JavaScript

Published on — Luigi Cavalieri

CharWriter.js: Typing-like Animations in Vanilla JavaScript

A few days ago I opened a public repository on GitHub to share some JavaScript I had just refactored, today I would like to introduce it to you. CharWriter is an unpretentious JavaScript ES6 class whose instances are able to insert, delete and replace text into an HTML tag by animating the task in a typing-like fashion.

Peruse on GitHub

To make the animation more realistic, the pace of typing is not as smooth as you would expect from a plain concatenation of characters, far from it: the characters are typed more or less quickly based on their type (uppercase, white space, number, and so on). But I have to note that despite my attempt to contaminate the typing-like animation by traits of the human factor, the script is anyway simple in nature, and as such it stays tied to the predictability of the virtual world.

Type, Delete, ReplaceWith ... Stop

The CharWriter class has four self-explanatory public methods:

  • CharWriter::type( text, callback, delay ) — types into the target HTML tag the text received as input, by executing the optional callback once the animation is over. delay is an optional argument through which you can tell the method after how many milliseconds from the end of the animation callback must be executed.
  • CharWriter::delete( callback, delay ) — animates the deletion of the text content of the target HTML tag. The two optional arguments have the same use as the homonymous arguments of the CharWriter::type() method.
  • CharWriter::replaceWith( text ) — replaces the text content of the target HTML tag with the text passed as input by animating both the deletion and the insertion tasks.
  • CharWriter::stop( haltDelay, callback ) — halts the currently running animation after an optional number of milliseconds set by haltDelay. callback is the optional function that must be executed once the current animation has been stopped.

An Example

The following code shows how by starting from a CharWriter object you can let it first type some text into the target HTML tag, and then let it replace the typed text when the target HTML tag receives a click event:

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>CharWriter Example</title>
6  <script src="charwriter.js"></script>
7</head>
8
9<body>
10<p id="text"></p>
11
12<script>
13// The animation starts once the document has been fully loaded.
14window.addEventListener( 'load', () => {
15  // CharWriter objects must be inizialised with the ID attribute
16  // of the target HTML tag — 'text' in our example.
17  const writer = new CharWriter( 'text' );
18  
19  // Function called when the target node receives a click event.
20  let startReplacing = ( event ) => {
21    // The 'replaceWith' animation is allowed to be launched only once.
22    event.target.removeEventListener( 'click', startReplacing );
23    
24    writer.replaceWith( 'Lorem ipsum dolor sit amet, 1 Jan 2022, consectetur adipisicing elit ...' );
25  };
26
27  // Function called when the 'type' animation is over.
28  let addClickEvent = () => writer.target.addEventListener( 'click', startReplacing );
29
30  // The 'type' animation starts 1 second after
31  // the document has been fully loaded.
32  setTimeout( () => writer.type( 'Click to replace this text.', addClickEvent ), 1000 );
33} );
34</script>
35</body>
36</html>
TOP