Animate Typing & Deleting Of Text - animateTyping.js

animateTyping.js is an easy-to-use jQuery plugin to simulates the typewriter effect that animate the typing and deleting of text within a container element.

How to use it:

1. Place the JavaScript file jquery.animateTyping.js after jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.animateTyping.js"></script>

2. Just add the CSS class 'animate-typing' to the text and the plugin will take care of the rest.

<div class="animate-typing">
  Text To Animate
</div>

3. The plugin also supports animate multi-line text seperated by the pipleline character.

<div class="animate-typing">
  Text 1 To Animate|
  Text 2 To Animate|
  Text 3 To Animate
</div>

4. Determine whether to repeat the typing/deleting animation.

<div class="animate-typing"
     data-animate-loop="true">
     Text To Animate
</div>

5. Config the animation speed & delay as follows:

<div class="animate-typing"
     data-type-speed="200"
     data-type-delay="200"
     data-remove-speed="50"
     data-remove-delay="500">
     Text To Animate
</div>

6. Config the blinking speed of the cursor displyed at the end of the text when typing/deleting.

<div class="animate-typing"
     data-cursor-speed="700">
     Text To Animate
</div>

---

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