Configurable Text Typing Effect In Pure JS – AutoTyper.js

Preview:

Description:

Yet another text typing effect written in pure JavaScript.

The AutoTyper.js library outputs an array of specific text letter by letter with several useful options:

• Infinite loop.
• Custom animation speed/delay.
• flipflop effect.

How to use it:

Create an empty container where you want to output the text.

<h1 class="demo">
</h1>

Insert the JavaScript file ‘AutoTyper.js’ into the document.

<script src="dist/autotyper.js"></script>

Create a new ‘autoTyper’ instance and define an array of text to output.

var typer = new autoTyper({
    selector: ".demo",
    words: ["CSSSCRIPT",".COM","CSSSCRIPT.COM"],
});

Start the text typing effect.

typer.start();

Append a blinking caret to the end of the text while typing.

@-webkit-keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

.demo {
  display: inline-block;
  border-right: 1px solid #404145;
  -webkit-animation: blink-caret 0.5s step-end infinite alternate;
  animation: blink-caret 0.5s step-end infinite alternate;
}

Possible configuration options to customize the text typing effect.

var typer = new autoTyper({
    selector: ".demo",
    words: ["CSSSCRIPT",".COM","CSSSCRIPT.COM"],
    charSpeed: 85, // typing speed
    delay: 2100, // typing delay
    loop: true, // infinite loop
    flipflop: true, // enable flipflop effect
    position: 0, // position
    currentWord: "", // current word
    element: null, // selector
    isStopped: false // is stopped on init
});

Pause/stop the typing effect.

typer.stop();

Changelog:

v1.0.3 (05/23/2021)

• Standard JS compatibility
• Fix: duplicate header of minified AutoTyper file

v1.0.2 (05/01/2021)

• Chore: packages are updated