Question

I would like to progressively pixelate an image on a webpage and animate the pixelation as a transition. The pixelation would begin by using small pixels and the pixels would gradually become larger. Finally, the pixelation would reverse and then reveal a second image.

I’m looking for an effect like the pixelate effect here – you need to select pixelate as the transition and then click the image.

Yes, I could use that library but I already have a raphael canvas and am interested to know whether (and how) this might be possible.

Answer 1

I think the best option is to use another library for pixelation (like the one you linked, if you don’t mind the license). Raphael.js is not supporting this effects as it is a vector library. You can convert the Raphael.js SVG into a image and run the effects on it – see this.

Note: This is not direct solution to your problem but it presents an another alternative how to achieve pixelation effect (for other users looking for a solution).

There is a close-pixelate project. It is a script able to convert an image into a pixelated version using an HTML5 canvas element and is licensed under MIT license.

The GitHub project page is here.

Usage:

document.getElementById('portrait-image').closePixelate([
  { resolution : 24 },
  { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);