Dynamic Animate Placeholder For Input Field – Typewriter.js

Preview:

Description:

The Typewriter.js JavaScript library applies typewriter-style text typing/deleting animations to placeholder text in the text field.

How to use it:

Import the Typewriter.js into the html document.

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

Create a new TypeWriter instance, specify the target text field and define an array of text for the animated placeholder.

<input type="text" id="example">

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3']);

Specify the writing/deleting delay between each character.

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3'],{
    writeDelay: 60,
    deleteDelay: 40
});

Specify the writing/deleting delay between each placeholder text

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3'],{
    holdOnceWritten: 1000,
    holdOnceDeleted: 1000
});

Determine if animation will run only once.

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3'],{
    stopAfterOnce: true
});