List Morph Demo

Demos > List Morph Demo

This is a demonstration of how Effect.Morph can be used to indicate a list reordering to the user. Click anywhere on the list to initiate a random reorder.

Lorem
ipsum
dolor
sit
amet

Source code of this demo


Array.prototype.shuffle = function() {
  return this.sortBy(Math.random);
};

(function() {
  function foo() {
    $('scripty_morph_demo').select('div').shuffle().each(function(e, i) {
      e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.4 }); 
    });
  }
  $('scripty_morph_demo').observe('click', foo);
  foo();
})();