The explode effect needs some serious performance improvement

The explode effect needs some serious performance improvement

It works really slowly, especially when requestAnimationFrame isn't supported, or when on a mobile device, or when you set the pieces parameter to 25 or more.

Here's a live demo: jQuery Explode VS pure JS Explode (performance comparison).

Try setting the pieces option to 10 (10x10 = 100 pieces). Depending on the device and browser, either the animation will be very jumpy, or there will be no animation at all.

There are two problems with the jQuery effect:

1) As far as I know, most jQuery versions don't support requestAnimationFrame. It means when 100 pieces are animated, jQuery uses 100 intervals to animate each respective piece. In pure JS, there is only one timer that animates all the pieces.
In jQuery: for (...) { setInterval() } -- jumpy and ugly animation for multiple elements
In pure JS: setInterval( for... ) -- very smooth and nice

2) When you make copies of the element and put it inside the pieces, it's better to make them position:static and move them with marginTop and marginLeft than make them position:absolute and use top/left. I'm not sure why, but this seriously boosts the performance. I got to know it by experiment. What's more, if you don't change the opacity (only move the pieces in different directions), there's no difference if you use static or absolute position.