Simple and Smooth Typing Text Animation Javascript Library

A small library for creating typing animations. tiper-js is a modern JavaScript component for printing any text using typing animations just like commands and output in the terminal.

typewriter effect javascript, typing and erasing animation css, text typing animation css, html typewriter effect, css typing animation multiple lines

Simple and Smooth Typing Text Animation Javascript Library | tiper-js

How to Make Use of 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 wherein you wish to print the textual content.

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

3. Initialize the tiper-js library and decide the textual content.

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

4. Start the typing animation.

tiper.beginTyping();

5. Type extra textual content.

tiper.line('More Text');

6. Stop typing animation.

tiper.stopTyping();

7. Add a blinking cursor to the top of the textual content whereas typing.

.tiper-js-caret.blinking

@keyframes blinking{
  to{
    visibility: hidden;
  }
}

8. All configuration choices with default values.

let tiper = new Tiper(
    document.querySelector(".tiper-js-container"),
    {
      text: "Welcome To WebCodeFlow!

This is like one of those scenes in a futuristic sci-fi movie where someone is communicating with the main character through an ominous computer screen. And the person is completely unaware of the context or meaning of the message, but then later finds out it was destined to be. ",
      hesitation: 0.45, // used as a think about figuring out the delay between typing the following 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!");
      },
    }
);

Javascript Animation Effects Library, Text Animation JS, Modern HTML, tiper JS Plugin/Github, jquery typewriter effect