Highly Configurable Auto Text Typing Library – typed.js

In this post I am going to share awesome Highly Configurable Auto Text Typing Library – typed.js. It animates your text to make it look like it is being typing. Typed.js is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.


Libraries

Include plugin library from CDN.

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JS

Define an array of strings to type in the page.

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

Rather than using the strings array to insert strings, you can place an HTML div on the page and read from it.
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.

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




Type Pausing – You can pause in the middle of a string for a given amount of time by including an escape character.

var typed = new Typed(".element", {
  // Waits 1000ms after typing "First"
  strings: ["First ^1000 sentence.", "Second sentence."]
});

Smart Backspacing – In the following example, this would only backspace the words after “This is a”

var typed = new Typed(".element", {
  strings: ["This is a JavaScript library", "This is an ES6 module"],
  smartBackspace: true 
});

Bulk Typing – The following example would emulate how a terminal acts when typing a command and seeing its result.

var typed = new Typed(".element", {
  strings: [
    "git push --force ^1000\n `pushed to origin with option force`"
  ]
});




Use the following options to customise the auto text typing.

var typed = new Typed(".element", {
  
  strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
  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',
 
  
  onComplete: (self) => {},
 
  
  preStringTyped: (arrayPos, self) => {},
 
  
  onStringTyped: (arrayPos, self) => {},
 
  
  onLastStringBackspaced: (self) => {},
 
  
  onTypingPaused: (arrayPos, self) => {},
 
  
  onTypingResumed: (arrayPos, self) => {},
 
  
  onReset: (self) => {},
 
  
  onStop: (arrayPos, self) => {},
 
  
  onStart: (arrayPos, self) => {},
 
  
  onDestroy: (self) => {}
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by mattboldt. Visit their official github repository for more information and follow for future updates.