Highly Configurable Text Typing Library – typed.js

Category: Animation , Javascript , Recommended | November 8, 2023
0 Comment
Demo Download
Author:mattboldt
Views Total:3,774 views
Official Page:Go to website
Last Update:November 8, 2023
License:MIT

Preview:

Highly Configurable Text Typing Library – typed.js

Description:

Just another JavaScript text typing animation library that animates your text to make it look like it is being typing.

Installation:

# Yarn
$ yarn add typed.js
# NPM
$ npm install typed.js --save
# Bower
$ bower install typed.js

How to use it:

Download and insert the typed.js JavaScript library into the html page.

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

Define an array of strings to type in the page.

var typed = new Typed(".element", {
    strings: ["String 1", "&amp; String 2", ...]
});

You are also allowed to type the text defined in the HTML as follows:

div class="type-wrap">
  <div id="typed-strings">
    <span>Typed.js^10 is a <strong>JavaScript</strong> library.</span>
    <p>It <em>types</em> out sentences.</p>
    <p>And then deletes them.</p>
    <p>Try it out!</p>
  </div>
  <span id="typed" style="white-space:pre;"></span>
</div>
var typed = new Typed("#typed", {
    stringsElement: '#typed-strings'
});

All default configuration options.

/**
 * @property {array} strings strings to be typed
 * @property {string} stringsElement ID of element containing string children
 */
strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
stringsElement: null,
/**
 * @property {number} typeSpeed type speed in milliseconds
 */
typeSpeed: 0,
/**
 * @property {number} startDelay time before typing starts in milliseconds
 */
startDelay: 0,
/**
 * @property {number} backSpeed backspacing speed in milliseconds
 */
backSpeed: 0,
/**
 * @property {boolean} smartBackspace only backspace what doesn't match the previous string
 */
smartBackspace: true,
/**
 * @property {boolean} shuffle shuffle the strings
 */
shuffle: false,
/**
 * @property {number} backDelay time before backspacing in milliseconds
 */
backDelay: 700,
/**
 * @property {boolean} fadeOut Fade out instead of backspace
 * @property {string} fadeOutClass css class for fade animation
 * @property {boolean} fadeOutDelay Fade out delay in milliseconds
 */
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
/**
 * @property {boolean} loop loop strings
 * @property {number} loopCount amount of loops
 */
loop: false,
loopCount: Infinity,
/**
 * @property {boolean} showCursor show cursor
 * @property {string} cursorChar character for cursor
 * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
 */
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
 * @property {string} attr attribute for typing
 * Ex: input placeholder, value, or just HTML text
 */
attr: null,
/**
 * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
 */
bindInputFocusEvents: false,
/**
 * @property {string} contentType 'html' or 'null' for plaintext
 */
contentType: 'html',

Callback functions.

/**
 * All typing is complete
 * @param {Typed} self
 */
onComplete: function onComplete(self) {},
/**
 * Before it begins typing
 * @param {Typed} self
 */
onBegin: (self) => {},
/**
 * Before each string is typed
 * @param {number} arrayPos
 * @param {Typed} self
 */
preStringTyped: function preStringTyped(arrayPos, self) {},
/**
 * After each string is typed
 * @param {number} arrayPos
 * @param {Typed} self
 */
onStringTyped: function onStringTyped(arrayPos, self) {},
/**
 * During looping, after last string is typed
 * @param {Typed} self
 */
onLastStringBackspaced: function onLastStringBackspaced(self) {},
/**
 * Typing has been stopped
 * @param {number} arrayPos
 * @param {Typed} self
 */
onTypingPaused: function onTypingPaused(arrayPos, self) {},
/**
 * Typing has been started after being stopped
 * @param {number} arrayPos
 * @param {Typed} self
 */
onTypingResumed: function onTypingResumed(arrayPos, self) {},
/**
 * After reset
 * @param {Typed} self
 */
onReset: function onReset(self) {},
/**
 * After stop
 * @param {number} arrayPos
 * @param {Typed} self
 */
onStop: function onStop(arrayPos, self) {},
/**
 * After start
 * @param {number} arrayPos
 * @param {Typed} self
 */
onStart: function onStart(arrayPos, self) {},
/**
 * After destroy
 * @param {Typed} self
 */
onDestroy: function onDestroy(self) {}

Changelog:

v2.1.0 (11/08/2023)

  • Bugfixes

v2.0.16 (05/01/2023)

  • Bugfixes

v2.0.15 (04/02/2023)

  • Bugfixes

v2.0.14 (03/25/2023)

  • Fixed missing TypedOptions type interface declaration.

v2.0.13 (03/12/2023)

  • Switched bundler from old gulp implementation to microbundle
  • Removed old dev dependencies
  • Changed implementation of hidden “strings element” to be more accessible

v2.0.12 (03/27/2021)

  • Bugfix
  • Adds aria-hidden to blinking cursor

v2.0.11 (09/24/2019)

  • Code formatting fixes (via prettier)
  • Added onBegin callback

v2.0.9 (01/31/2019)

  • Bugfixed

v2.0.8 (06/14/2018)

  • Fixed: Cursor not blinking unless FadeOut is present

v2.0.7 (05/27/2018)

  • fixed conflicts and tested demo

See Also:

You Might Be Interested In:

Leave a Reply