Vintage Typing Animation With Sound Effect – Typewriterjs

Category: Animation , Javascript | February 4, 2021
Views Total:1,147 views
Official Page:Go to website
Last Update:February 4, 2021


Vintage Typing Animation With Sound Effect – Typewriterjs


Typewriterjs is a vanilla JavaScript library that applies a typewriter-like typing effect to text content with support for custom cursor and sound effect.

How to use it:

1. Download and insert the Typewriterjs into the document.

<script type="text/javascript" src="dist/typewriter.min.js"></script>

2. Create a new TypeWriter instance and specify the target container & text to output.

var typewriter = new Typewriter("#container");

3. Customize the time to wait before typing the next character. Default: 0.

new TypeWriter({
    target: document.getElementById('container'),
    delay: 200

4. Enable/disable the sound effect.

new TypeWriter({
    target: document.getElementById('container'),
    sound: {
      // Whether or not to enable the typing sounds
      enabled: false,
      // The volume of the typing sounds
      volume: 0.5,

5. Customize the cursor that will display at the end of the text while typing.

new TypeWriter({
    target: document.getElementById('container'),
    cursor: {
      // The starting index of the cursor
      index: 0,
      // The type of the caret, can be “stick“, “underscore” or a name of your choosing
      type: "stick",
      // Whether or not the play a blinking animation on the caret
      blink: true,

6. Determine the interval in milliseconds between inputting every character. Default: 300

new TypeWriter({
    target: document.getElementById('container'),
    tick: 500

7. API methods.

typewriter.type(text, config);
typewriter.delete(chars, config);
typewriter.move(index); // move cursor



  • Demo update

v5.0.0 (11/08/2020)

  • Complete rewrite and refactorization.


  • Cursor controls added.


  • Fixed some bugs with stopping the typewriter.

You Might Be Interested In:

Leave a Reply