Demo - JavaScript Typing Animation Library

Typed.js is a JavaScript library that provides the experience of animated typing letters. It has various options to modify it's features(shuffle, loop, loopCount, cursorChar and many more) accordingly.

Features:

Supports npm, yarn and bower.
You can customize typing speed as you need.
You can controll the loopCount also.
It can be played within loop.
Supports backSpeed and smartBackspace.

Install with npm

npm install typed.js

Install with yarn

yarn add typed.js

Install with bower

bower install typed.js

How to use it:

1. Load the required JavaScript resource typed.js in the HTML page.

<script src="path/typed.js"></script>

OR from CDN

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

2. Add basic SEO friendly html structure to the page.

<div id="typed-strings">
  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
  <p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>

3. Initialized the stringsElement to respective ID #typed

<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'
  });
</script>

Use it with "strings"

1. Just add a span to the page with a class named element

<span class="element"></span>

2. Initialized strings to respective class named .element

var options = {
  strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
  typeSpeed: 40,
  loop: true,
}
var typed = new Typed(".element", options);

Plugin's default configuration options:

{
  strings:[],
  stringsElement: null,
  typeSpeed: 0,
  startDelay: 0,
  backSpeed: 0,
  smartBackspace: true,
  shuffle: false,
  backDelay: 700,
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500,
  loop: false,
  loopCount: Infinity,
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,
  attr: null,
  bindInputFocusEvents: false,
  contentType: 'html'
}

Find detail configuration options from the main document.

Plugin's Options:

Name	Default	Type	Description
strings	`null`	array	strings - strings to be typed
stringsElement	`null`	string	stringsElement - ID of element containing string children
typeSpeed	`0`	number	typeSpeed - type speed in milliseconds
startDelay	`0`	number	startDelay - time before typing starts in milliseconds
backSpeed	`0`	number	backSpeed - backspacing speed in milliseconds
smartBackspace	`true`	boolean	smartBackspace - only backspace what doesn't match the previous string
shuffle	`false`	boolean	shuffle - shuffle the strings
backDelay	`700`	number	backDelay - time before backspacing in milliseconds
fadeOut	`false`	boolean	fadeOut - Fade out instead of backspace
fadeOutClass	`'typed-fade-out'`	string	fadeOutClass - css class for fade animation
fadeOutDelay	`500`	boolean	fadeOutDelay - Fade out delay in milliseconds
loop	`false`	boolean	loop - loop strings
loopCount	`Infinity`	number	loopCount - amount of loops
showCursor	`true`	boolean	showCursor - show cursor
cursorChar	`'\|'`	string	cursorChar - character for cursor
autoInsertCss	`true`	boolean	autoInsertCss - insert CSS for cursor and fadeOut into HTML <head></head>
attr	`null`	string	attr - attribute for typing
bindInputFocusEvents	`false`	boolean	bindInputFocusEvents - bind to focus and blur if el is text input
contentType	`html`	string	contentType - 'html' or 'null' for plaintext