Skip to content


Switch branches/tags

Latest commit

this allow to preserve the display of childs, we don't know if it's block or inline block (or anything else)

Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Dev Dependency Status

A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate.css.

It cycles through an element's [child] objects containing any content (i.e. images, text, etc) in quick succession and it is a great tool for displaying tweets from Twitter or items from other feeds. It is a spin-off project of Morphext (a simple text rotator).

Website / Demo


Download from the project page.

Install with Bower: bower install --save Morphist


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

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

  3. Encapsulate your rotating objects (children, e.g. list item) in an element (parent, e.g. unordered list):

    I am a...
    <ul id="js-rotating">
        <li>So Simple</li>
        <li>Very Doge</li>
        <li>Much Wow</li>
        <li>Such Cool</li>
    ...child object rotator.
  4. Trigger the plugin by calling Morphist() on the element (parent) containing the rotating objects (children):


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


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

Option Type Default Description
animateIn string bounceIn The entrance animation type (In).
animateOut string rollOut The exit animation type (Out). Refer to Animate.css for a list of available animations.
speed int 2000 The delay between the changing of each object in milliseconds.
complete object Function null A callback that is executed after an item is animated in.

They may be used like so:

    animateIn: "fadeIn", // Overrides default "bounceIn"
    animateOut: "zoomOut", // Overrides default "rollOut"
    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 object. Thus, the default animation speed (different from the interval between each object as described above) may be altered via CSS:

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


Refer to Morphext's "Issues".

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.



Morphist is licensed under the MIT license (