dojox.fx.split

• The number of rows and columns in which to split the element
• The distance the pieces travel (as a multiple of the element's respective dimensions)
• Whether or not to fade the pieces in/out
• How much the effect should be randomized (a percentage)
• Whether or not the pieces should appear outside the element's boundaries

Just click each box to play its animation!

• BlockFadeOut,
  BlockFadeIn uniformly
  rows: 1
columns: 10

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• BlockFadeOut,
  BlockFadeIn randomly
  random: 0.25
reverseOrder: true

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Disintegrate, Build
  uniformly (cropped)
  distance: 1
crop: true
fade: false

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Disintegrate, Build
  randomly
  random: 0.5
distance: 2.5

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Explode, Converge
  uniformly (cropped)
  rows: 2
columns: 2
distance: 0.75
fade: false
crop: true
(custom easing)

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Explode, Converge
  randomly
  rows: 5
columns: 5
distance: 1.5
duration: 1500
random: 0.75

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Shear, UnShear
  rows (cropped)
  interval: 50
distance: 0.95
rows: 10
columns: 1
fade: false
crop: true
reverseOrder: true

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Shear, UnShear
  rows and columns
  random: 1

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Pinwheel, UnPinwheel
  uniformly
  fade: false

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.

• Pinwheel, UnPinwheel
  randomly
  random: 1
rows: 5
columns: 5

  ---

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.