A Simple and Powerful JavaScript Plugin for Cool Typewriter Effect | TypewriterJS

TypewriterJS is a simple but powerful native JavaScript plugin for a great typewriter effect. This JavaScript plugin can be used to create a neat automated animation effect on websites.

javascript typewriter effect, jquery typewriter effect, typing and erasing animation css, typewriter js, multiline typewriter effect, typewriter effect css

How to make use of it:

Load the primary JS file typewriter.js right earlier than the closing body tag.

<script src="typewriter.js"></script>

Create a placeholder component:

<div id="demo"></div>

Initialize the library on the component and specify an array of strings to type out.

var demo = document.getElementById('demo');

var typewriter = new Typewriter(demo, {
    strings: ['Strings', 'To', 'Type']

Available API strategies to manage the typing animation.

// starts the typing animation

// Stops the animation

// Time to pause for in milliseconds

// String to type out

// Paste out a string

// Deletes all strings

// Deletes a amount of characters

// callback

// Changes thedeleting speed

// Changes the delay 

All configuration options to customize the typing animation.

var typewriter = new Typewriter(demo, {
    strings: ['Strings', 'To', 'Type'],
    cursor: '|',
    delay: 'natural', // 'natural' or Number
    loop: false, // infinite loop
    autoStart: false,
    devMode: false,
    wrapperClassName: 'Typewriter__wrapper',
    cursorClassName: 'Typewriter__cursor',

Simple Typewriter Effect In Pure JavaScript, TypewriterJS Plugin/Github, typewriter js cdn, js typewriter effect multiple lines

TypewriterJS Demo

See Demo And Download

Official Website(tameemsafi): Click Here

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

Related Posts


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…


[Game] An Open-Source Music Player for Angular

game-music-player is an open-source music player that uses the latest popular web technologies: Angular, Ionic, Firebase, etc. It would be great if this project could grow into…