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

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 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(
      text: `Any Text Here`

4. Start the typing animation.


5. Type extra textual content.

tiper.line('More Text');

6. Stop typing animation.


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


@keyframes blinking{
    visibility: hidden;

8. All configuration choices with default values.

let tiper = new Tiper(
      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

See Demo And Download

Official Website(carlelieser): Click Here

This superior jQuery/javascript plugin is developed by carlelieser. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry šŸ’„…


How to Create a Skeleton Screen Loading In Pure CSS

Skeleton Screen CSS is a complete set of elements for a hierarchical screen consisting of pure CSS. The source includes scss and compiled thumbnail and non-thumbnail CSS…