Tiny Text Animation Plugin with jQuery and CSS3 - Textify

Textify is a lightweight and configurable jQuery plugin which enables you to show / hide text line by line using CSS3 transitions and transforms.

Basic usage:

1. Wrap your multi-line text into span elements.

<p id="demo" class="textify">
  <span>Nisi placerat. Ridiculus </span>
  <span>egestas lorem proin porta </span>
  <span>etiam magna nunc? Phasellus </span>
  <span>integer ut tincidunt mus, </span>
  <span>eu porta porttitor, odio?</span>
</p>

2. Add jQuery library and the jQuery Textify plugin to the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/libs/textify.jquery.min.js"></script>

3. Initialize the plugin with configuration options.

textify_example = $('#demo').textify({

  // duration of transitions in milliseconds
  duration : 500, 

  // delay between each transition in milliseconds
  delay : 100,  

  // class name to show text
  showClass : 'show', 

  // accepts CSS easing
  easing : 'linear', 

  // callback invoked once show animation is complete
  onShowCallback : undefined, 

  // callback invoked once show animation is complete
  onHideCallback : undefined

});

4. Add CSS3 based animations to the text.

.textify span {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition-property: transform, opacity;
  display: block;
}

.textify.show span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

5. Show the text line by line.

textify_example.data('textify').show();

6. Hide the text line by line.

textify_example.data('textify').hide();

---

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