Human Typing Simulator In JavaScript – TypeWriter

Preview:

Description:

Yet another JavaScript library to simulate the typewriter effect that prints any text with typing and deleting animations.

See Also:

• 10 Best Typewriter Text Animation JavaScript Libraries

How to use it:

1. Download and import the TypeWriter.js JavaScript library.

<script src="./TypeWriter.js"></script>

2. Initialize the TypeWriter.

<h1 id="typewriter"></h1>

new TypeWriter(`#typewriter`, {
    // options here
})

3. Define the text to print in the container you just created.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)

4. Specify the time to wait before performing the next action.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)

5. Remove a specified amount of characters.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)
.remove(6)

6. Or remove all text.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)
.removeAll()

7. Start the typing & deleting animations.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)
.removeAll()
.start();

8. Available options to config the typewriter effect.

new TypeWriter(`#typewriter`, {

    // determine to loop the animation
    loop: true,

    // customize the binking cursor
    cursor: {
      speed: 700,
      size: 'larger',
      id: 'Some_TypeWriter_CSS'
    },

    // time to wait before adding the new character to the string in miliseconds
    timeout: 50
})

Changelog:

01/04/2022

• Update TypeWriter.js