Sequential Text Typing Effect – AutoTyping.js

Preview:

Description:

AutoTyping.js is a vanilla JavaScript library that applies sequential text typing and deleting effects to an array of strings.

Use this library to create a text rotator that automatically rotates through any text with a typewriter-like character typing effect.

More Features:

• Configurable typing/deleting duration, delay, and speed.
• Custom blinking cursor.
• Infinite looping or not.
• Random interval between each character to simulate real human typing.

See Also:

• 10 Best Typewriter Text Animation JavaScript Libraries

How to use it:

1. Download the package and insert the AutoTyping.min.js script into the HTML page.

<script src="dist/AutoTyping.min.js"></script>

2. Create a new AutoTyping instance, specify the target container in which the text will print out, and define an array of strings to be printed out as follows:

<h1 id="header"></h1>

const myheader = new AutoTyping({
      id: 'header',
      typeText: ['AutoTyping.js Example', 'A Text Typing Effect']
})

3. Initialize the library to start the text typing effect.

myheader.init()

4. Customize the font color. Default: #000.

const myheader = new AutoTyping({
      id: 'header',
      typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
      textColor: '#ff0000'
})

5. Customize the text typing effect.

const myheader = new AutoTyping({
      id: 'header',
      typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
      typeSpeed: 100,
      typeDelay: 100,
      typeRandom: false,
      deleteSpeed: 50,
      deleteDelay: 50,
      typeInfinity: true
})

6. Customize the blinking cursor displaying at the end of the text while typing.

const myheader = new AutoTyping({
      id: 'header',
      typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
      cursor: '|',
      cursorColor: '#000',
      cursorSpeed: 300
})

7. Available callback function that will be fired after every typing cycle.

const myheader = new AutoTyping({
      id: 'header',
      typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
      callBack: {
        counter: 3,
        method: function(counter){
          // do something
        } 
      }
})

8. Delete a text to a specific character, and type a new sequel.

const myheader = new AutoTyping({
      id: 'header',
      typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
      textDeleteOptions: {
        0: { //index of strings in "typeText" Array 
          deleteToChar: 2,
          continueThis: "rld best"
      }
  }
})

Changelog:

v1.2.6 (02/22/2021)

• Added textDeleteOptions option.