Tiny Typewriter Effect In Vanilla JavaScript – tinyTypewriter.js

Category: Animation , Javascript , Text | February 5, 2021

0 Comment

Demo Download

AUTHOR:	cesarlevel
VIEWS TOTAL:	65 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	February 5, 2021
LICENSE:	MIT

---

Preview:

Description:

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

Features:

• 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
$ 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
  
});