A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. It is more succinctly described by Softpedia as:

A jQuery plugin for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images... This can be a great tool for displaying catch phrases, mission statements, tag lines, and so on.

If you would like to achieve a similar effect with more flexibility (e.g. out animation) and with HTML objects rather than text phrases (e.g. unordered list items), please check out Morphist.

Website / Demo

Download from the project page.

Install with Bower: bower install --save Morphext

1. Import the latest Animate.css and jQuery library into your HTML.

2. Import morphext.css and include morphext.min.js in your HTML document.

3. Encapsulate your rotating phrases in an element and separate each phrase with a comma or a separator of your choice:

   I am a <span id="js-rotating">So Simple, Very Doge, Much Wow, Such Cool</span> Text Rotator

4. Trigger the plugin by calling Morphext() on the element containing the rotating phrases:

   $("#js-rotating").Morphext();

A demo titled index.html is included in this repository. Open it to see the end-result.

Morphext exposes the following options to alter the behaviour of the plugin:

They may be used like so:

$("#js-rotating").Morphext({
    animation: "fadeIn", // Overrides default "bounceIn"
    separator: "|", // Overrides default ","
    speed: 3000, // Overrides default 2000
    complete: function () {
        // Overrides default empty function
    }
});

The plugin relies heavily on Animate.css for its smooth, high performance animations to transition between each phrase. Thus, the default animation speed (different from the interval between each phrase as described above) may be altered via CSS:

#yourElement, .yourClass {
    /* Overrides Animate.css 1s duration */
    -vendor-animation-duration: 3s;
}

Should you encounter any problems or require assistance with this plugin, simply open a GitHub issue in this repository or you may contact me via Twitter.

• jQuery
• Animate.css

Native ports of Morphext have been developed in other JavaScript frameworks (e.g. React and Polymer):

• Morphext React
• Morphext Polymer

They are not part of the official plugin development and the approach used in developing these ports may not be idiomatic. Please use them at your own risk.

Issues and pull requests are welcomed.

Morphext is licensed under the MIT license (http://ian.mit-license.org/).