Press "Enter" to skip to content

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.