Versatile JavaScript Typewriter Terminal Text Effect Library | TypeIt

TypeIt is the most versatile JavaScript typewriter effect utility on the planet. With its simple and flexible configuration, you can write single or multiple strings that separate lines, delete and replace each other, and easily handle a string containing HTML, a loop, and much more.

For more advanced and controlled typing effects, TypeIt comes with accompanying functions that can be chained in to control your typing down to 1 character or milliseconds, allowing you to write dynamic narration, with complete control over speed changes, line breaks, ellipses, and pauses.

jquery typewriter effect, typing and erasing animation css, typing plugin jquery, terminal typing animation, typewriter plugin

Feature guides

  • Choose to start typing only when the target item becomes visible on the screen.
  • Repeat your string(s) continuously.
  • Set the strings to be written via an options object or in HTML (a useful fallback in case no javascript is enabled for the user, and also for SEO).
  • Use a single TypeIt instance to target multiple different elements on the page.
  • Handle HTML (even nested tags!) with ease, keeping all its attributes (categories, identifiers, etc.).
  • Use the accompanying functions to chain individual commands together to fine-tune your typing.
  • Ready for inclusion via a JS module, or as a separate script that is loaded onto your page (“old” and recent packages provided).
  • No dependencies!

How to make use of it:

1. Download & Install the library.

# Yarn
$ yarn add typeit

# NPM
$ npm install typeit --save

2. Import the TypeIt as a module.

import TypeIt from 'typeit';

3. Or straight load the TypeIt library from dist folder.

<script src="dist/index.umd.js"></script>
// OR FROM A CDN
<script src="https://unpkg.com/typeit"></script>

4. Create a brand new TypeIt instance and specify the goal aspect the place text will probably be typed.

new TypeIt('#textContainer',{
    strings: "Your Content Here",
});
// OR
new TypeIt('#textContainer',{
    strings: ["Your Content Here"],
});

5. Start the typing animation.

new TypeIt('#textContainer').go();

6. Plugin’s default settings.

new TypeIt('#textContainer',{

  // what to type
  strings: 'You need a string!',

  // shows cursor
  cursor: true,

  // cursor character
  cursorChar: "|",

  // bink speed
  cursorSpeed: 1000,

  // delete speed
  deleteSpeed: null,

  // Choose whether you want multiple strings to be printed on top of each other
  breakLines: true,

  // The amount of time between typing multiple strings.
  breakDelay: 750,

  // Typing speed
  speed: 200,

  // The amount of time before the plugin begins typing after initalizing.
  startDelay: 250,

  // Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. 
  startDelete: false,

  // The amount of time (in milliseconds) between typing multiple strings.
  nextStringDelay: 750,

  // Have your string or strings continuously loop after completing.
  loop: false,

  // The amount of time between looping over a string or set of strings again.  
  loopDelay: 750,

  // Handle strings as HTML, which will process tags and HTML entities
  html: true,

  // Make the typing pace irregular, as if a real person is doing it
  lifeLike: true,

  // Determines if the instance will begin typing automatically on .go(), or only when the target element becomes visible in the viewport. 
  waitUntilVisible: false,
  
});

7. Callback capabilities.

new TypeIt('#textContainer',{

    beforeStep: (step, queue, instance) => {
       // before each step in the queue.
    },

    beforeString: (step, queue, instance) => {
       // before each string in the queue.
    },

    afterStep: (step, queue, instance) => {
       // after each step in the queue.
    },

    afterString: (step, queue, instance) => {
       // after each string in the queue.
    },

    afterComplete: (instance) => {
       // after the entire instance has completed typing.
    },
  
});

8. API strategies.

new TypeIt('#textContainer', {
    /;/ options here
})
.type('something to type')
.pause(300)
.break()
.delete(2)
.pause(250)
.options({speed: 100, deleteSpeed: 75})
.empty()
..move(-5) // move the cursor
.exec() // fire any arbitrary function
.go()

const intance = new TypeIt('#textContainer', {
      // options here
});
instance.destroy();
instance.reset();
instance.freeze();
instance.unfreeze();
instance.is('started');
instance.is('completed');
instance.is('frozen');
instance.is('destroyed');

jQuery Plugin For Customizable Terminal Text Effect, TypeIt Plugin/Github, typing script, terminal animation js


See Demo And Download

Official Website(alexmacarthur): Click Here

This superior jQuery/javascript plugin is developed by alexmacarthur. For extra advanced usage, please go to the official website.

Related Posts

Input-Values-Using-Mouse-Drag

Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…

simple-parallax-scrolling-js

Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…

Convert-Form-Data-to-JSON

How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…

editable-html-table-using-javascript

A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

jquery.youtube-background

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…