Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 864cba6b1e
Fetching contributors…

Cannot retrieve contributors at this time

46 lines (36 sloc) 1.439 kb


Split images in tiles with css3 transitions.

Support: Webkit, Firefox, Opera, IE10, IE9-8*
License: MIT
* In browsers that don't support css3 transitions classes won't be animated but some effects will still work, just a bit choppy.
** IE8 requires polyfills for and Array.prototype.forEach. You may use ES5 Shim.


  • x: number of tiles in X axis.
  • y: number of tiles in Y axis.
  • rand: animate tiles in random order.
  • speed: speed of effect in ms.
  • effect: default, simple, switchlr, switchud, updown, leftright, fliplr, flipud.
  • reverse: begin effect from opposite side.
  • limit: limit animation to a certain percentage of the image.
  • rewind: toggle animation back at a certain point in time (percentage).


  • default
  • simple
  • switchlr: y=1 and x must be even.
  • switchud: x=1 and y must be even.
  • updown: y=1.
  • leftright x=1.
  • fliplr
  • flipud


Use .trigger('toggleTiles', callback) to toggle the effect on and off.


var $img = $('img').tiles({ rand: true });
  $img.trigger('toggleTiles', function($tiles, $image){
    // Finished
Jump to Line
Something went wrong with that request. Please try again.