Modern Typing Animation JavaScript Library – tiper-js

Preview:

Description:

tiper-js is a modern JavaScript component to print any text with a typing animation just like the commands and output in a terminal.

How to use it:

1. Install and Import the tiper-js as an ES module.

# NPM
$ npm i tiper-js --save

import Tiper from "tiper-js";

2. Create a container in which you want to print the text.

<div class="tiper-js-container"></div>

3. Initialize the tiper-js library and determine the text you want to print out.

let tiper = new Tiper(
    document.querySelector(".tiper-js-container"),
    {
      text: `Any Text Here`
    }
);

4. Start the typing animation.

tiper.beginTyping();

5. Type more text.

tiper.line('More Text');

6. Stop the typing animation.

tiper.stopTyping();

7. Add a blinking cursor to the end of the text while typing.

.tiper-js-caret.blinking{
  animation: blinking 1s infinite steps(2, start); 
}
@keyframes blinking{
  to{
    visibility: hidden;
  }
}

8. All configuration options with default values.

let tiper = new Tiper(
    document.querySelector(".tiper-js-container"),
    {
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus sagittis dapibus. Fusce lacinia dui tortor, at porttitor quam luctus ut. Aliquam gravida commodo eros ac dictum. Nam ac odio at sem interdum dictum eget sit amet lorem. Vivamus enim velit, condimentum sed neque non, dignissim viverra nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sodales, neque eget tincidunt efficitur, nisi orci vestibulum diam, eget fringilla dui dolor sed nisi. Pellentesque feugiat augue in felis interdum, non tempus dui volutpat. Sed pulvinar, massa non placerat scelerisque, nunc tellus posuere felis, a ultricies mi libero id velit. Mauris sed arcu dolor. Mauris varius a metus sit amet pulvinar. Proin rhoncus non quam in vulputate. ",
      hesitation: 0.45, // used as a factor in determining the delay between typing the next character
      wordsPerMinute: 40,
      pauseTimeout: 525,
      pauseOnSpace: false,
      pauseOnEndOfSentence: true,
      showCaret: false,
      caretType: "normal", // 'normal' or 'underscore'
      glitch: false, //  show glitch effect
      onFinishedTyping: function () {
        console.log("Finished typing!");
      },
    }
);