Upon making a portfolio of my own, I had this idea that sounded very cool in my head at the time, where I could make an intro that outputs a certain headline in an old typewriter fashion, and that's what this javascript package is for, simply, just that, you specify the output element, play with the parameters you have, and let the magic happen. Nothing too shabby to be honest, just another handy tool for you, and there are a lot nowadays, too excited to start up? check out the installation guide below...

The following is only applicable starting from version 4.0.0 . 1. Navigate to the dist folder inside of the downloaded package. 2. Copy either of typewriter.js or typewriter.min.js to your project.

Documentation

Before resulting in any animation, you first need to have a (you-guessed-it) typewriter, just like in the real world, where can you get one? you simply have to create typewriter object by instantiating the Typewriter constructor. That's when you get to pass in the animation parameters, and only then, you can make the typewriter make its own thing, that is, animating the text, as a starting point, let's break down our main constructor.

The constructor

Typewriter(options: Object);

In case you don't want to go through all of the parameters, you can skip them all, as they all have a default backup value to operate on, but, the same cannot be said about the target property, you must pass in a valid DOM element, or else, it wouldn't work, the following table explains all of the properties mentioned above in a better manner;

Option Description Default value target The element you want to perform the animation on, must be a valid DOM element. undefined speed The time it would take to output a single character 1500 milliseconds

Instantiating an object

Now that we've explained what each of the properties do, here comes the instantiation part, simply provide a variable to hold the returned value upon calling the constructor.

var tw = new TypeWriter({ target: document.getElementById('sample'), speed: 300 }); tw.type({script: 'Hello, there!'});

The code that we've just written, of course after a thousand prayers that it would work at the first shot, outputs "Hello, there!" in the target element.

Well, all we did, was create a typewriter object, pointed it to the element with the id of sample, making it so that each character is output every 300 milliseconds.

That alone only created a mere object, then we used the type method, and passed in the script argument setting it to " Hello, there! " and surprise, surprise, that isn't the only method available, let's introduce you to your new beloved friends.

Methods

There are quite a variety of methods you can use to animate with typewriterjs:

type Description This is the primitive method that does it all (mostly), a single call, and all is put to motion, it accepts an object of five arguments, although, in 99% of the time, you'd find yourself not having to pass any, or at least only the first one. Syntax type({ script: string, start: number, length: number, endCallback: function, charCallback: function }); Option Type Default value Description script string Empty string. The script you want to output in the target using the typewriter. start integer 0 The index of where to start typing in the target. length integer The length of the script. The number of characters you want to output, and thus where the animation stops at. endCallback function void The function to execute once the script has been fully typed. charCallback function void. The function to excute whenever a character is typed. It passes along two parameters, the first one for the current index, and the second one is for the printed character. Usage // index.html <div id="some-id"> Lorem ipsum dolor sit amet. </div> // main.js var tw = new Typewriter({ target: document.getElementById("some-id"), speed: 400 }); tw.type({ script: "Some interesting text", start: 7, length: 5, endCallback: function() { console.log('Animation finished!'); }, charCallback: function(index, char) { console.log("Current index: " + index + " - Current character: “" + char + "”"); } }); The code above does the following:

delete Description This method performs a script deletion animation, basically, if the type function is light, this one would be the dark, it simply does the same thing, just in reverse. This method accepts an object with four arguments, however, you can still call it without any, that will cause the whole text to be deleted. Syntax delete({ start: number, length: number, endCallback: function, charCallback: function }); Option Type Default value Description start integer The length of the target's `textContent`. Any function you want to execute upon finishing the animation length integer The length of the target's `textContent`. The amount of characters to delete. endCallback function void The function to execute once the script has been fully deleted. charCallback function void The function to excute whenever a character is deleted. It passes along two parameters, the first one for the current index, and the second one is for the deleted character. Usage // index.html <div id="some-id"> Lorem ipsum dolor sit amet. </div> // main.js var tw = new Typewriter({ target: document.getElementById("some-id"), speed: 400 }); tw.delete({ start: 18, length: 5, endCallback: function() { console.log('Animation finished!'); }, charCallback: function(index, char) { console.log("Current index: " + index + " - Current character: “" + char + "”"); } });

stop Description Strops the animation completely at any time, to be used in care. Syntax tw.stop(); Usage var tw = new Typewriter({target: document.getElementById('some-id')}); tw.delete({ charCallback: function(index, char) { if (char === 's') { tw.stop(); } } }) The code above starts a deletion animation with the speed of 1500 milliseconds (The default value), and stops the animation as soon as the “s” character is deleted.