Animate Characters In Text Field While Typing - jQuery typingEffect

File Size: 4.99 KB
Views Total: 628
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animate Characters In Text Field While Typing - jQuery typingEffect

The jQuery typingEffect plugin applies awesome CSS3 powered animations to characters when typed in a text field. Supports both textarea and input elements.

Supported typing animations:

  • zoom (default)
  • blink
  • ease
  • rotate
  • flipy
  • flipx
  • explode
  • shake

How to use it:

1. Import the necessary JavaScript and CSS files into the document.

<link href="typingeffect.jquery.css" rel="stylesheet">
<script src="" 
<script src="typingeffect.js"></script>

2. Call the function on the target text field and done.

<textarea class="typingeffect"></textarea>
<input type="text" class="typingeffect">

3. Customize the typing animation.

    animation:"zoom", // zoom,blink,ease,rotate,flipy,flipx,explode,shake

5. Customize the duration of the typing animation.


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