Animate The Typing Of Text On A Page - jQuery AEO-TypeWriter

A configurable text animation plugin to simulate the typewriter effect that prints any text inside an element one character at a time.

More features:

• With or without blinking cursor.
• Time to wait between each character.
• Automatically fades out when the typing animation is finished.

See also:

• Best Text Typing Animation jQuery Plugins
• Best Text Animation JavaScript & CSS Libraries

How to use it:

1. To get started, load the JavaScript aeo-typewriter.js after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/aeo-typewriter.js"></script>

2. Wrap the text string into a container element using the tw-text attribute:

<div id="example" 
     tw-text="Text To Print">
</div>

3. Invoke the plugin and done.

$("#example").typewriter();

4. You can also define the text string in the JavaScript as follows:

<div id="example">
</div>

$("#example").typewriter({
  text: 'Text To Print'
});

5. Enable/disable the blinking cursor that displayes at the end of the text string while typing.

$("#example").typewriter({
  cursor: true
});

.tw-cursor {
  border-right: 2px solid #fff;
  display: initial;
  animation: blinkCursor 500ms steps(11) infinite normal;
}

@keyframes blinkCursor{
  from {border-right-color: #fff;}
  to {border-right-color: #000;}
}

6. Specify the time to wait between each character while typing.

$("#example").typewriter({
  delay: 150
});

7. Specify the time to wait before typing.

$("#example").typewriter({
  waitingTime: 1000
});

8. Specify the time to wait before hiding.

$("#example").typewriter({
  hide: 0
});

---

This awesome jQuery plugin is developed by ahmeterenodaci. For more Advanced Usages, please check the demo page or visit the official website.