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

File Size: 4.61 KB
Views Total: 2547
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src="" 
<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">

3. Invoke the plugin and done.


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

<div id="example">
  text: 'Text To Print'

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

  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.

  delay: 150

7. Specify the time to wait before typing.

  waitingTime: 1000

8. Specify the time to wait before hiding.

  hide: 0

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