jschr/textillate

Textillate.js is a JavaScript plugin that adds animated effects to text on a webpage. When a page loads, instead of text appearing instantly, each letter or word can fly in, fade in, roll in, bounce, or perform other visual transitions. The same kinds of animations can play in reverse when the text disappears. A live demo is available at textillate.js.org. The plugin works with jQuery and draws its animation effects from animate.css, a separate library of CSS animation presets. Adding it to a page involves including these dependencies, marking up the text element with a specific class, and calling the plugin with one line of JavaScript. From there you choose which animation plays when the text appears and which plays when it leaves. Options give fine-grained control over timing. You can set a delay between each character so letters appear one after another in sequence, or make all characters animate at the same time. Characters can appear in order, in reverse order, or in a randomized order. You can also loop through a list of phrases, displaying each one in turn with its own animation, which makes it useful for rotating taglines or headlines on a landing page. The plugin fires events at each stage of the animation, so other JavaScript on the page can react when the text finishes appearing or starts to leave. It also exposes methods to manually start, stop, or trigger the in and out animations from your own code. The README is focused on usage and covers configuration options in detail, but does not describe a build process or discuss browser compatibility beyond its reliance on CSS3 animations.