Tiny Typewriter Effect In Vanilla JavaScript – tinyTypewriter.js

Category: Animation , Javascript , Text | February 5, 2021
Views Total:934 views
Official Page:Go to website
Last Update:February 5, 2021


Tiny Typewriter Effect In Vanilla JavaScript – tinyTypewriter.js


tinyTypewriter.js is a tiny yet configurable typewriter-like typing animation written in Vanilla JavaScript.


  • Customizable typing & deleting animations.
  • Infinite loop.
  • Auto starts the animation only when the element is in the viewport.

How to use it:

1. Install & download.

$ npm i tiny-typewriter

2. Import the tinyTypewriter.js.

// ES module
import tinyTypewriter from 'tiny-typewriter';
// Browser
<script src="dist/tinyTypewriter.min.js"></script>

3. Add fallback text to the typewriter container.

<h1>CSS <span id="typewriter">Fallback Text</span></h1>

4. Initialize the library and define an array of text you’d like to rotate through.

const typewriter = document.querySelector("#typewriter");
tinyTypewriter(typewriter, {
  items: ['Script', 'HTML']

5. Config the typing animation with the following options:

tinyTypewriter(typewriter, {
  // animation speed
  typeSpeed: 100,
  deleteSpeed: 50,
  // delay between text
  delayBetweenItems: 2000,
  // infinite loop
  loop: true,
  // time to wait before starting the animation
  startDelay: 0,
  // start the animation at index n
  startsAtIndex: 0,
  // config animated cursor here
  cursor: true,
  cursorChar: "|",
  cursorCharBlinkSpeed: 500,
  cursorCharBlinkTransitionSpeed: 0.15,
  // start the animation when the element is in the viewport
  startOnView: true,
  // offset for startOnView option
  startOnViewOffset: 0

You Might Be Interested In:

Leave a Reply