Is it possible to animate a PNG in a website?


We saw this page and wanted to know if anyone can point us in the direction of how this was created?

Watch the PNG move and animate.

3/4/2015 4:04:00 PM

Accepted Answer

The animation was built in the code itself (js, html, css)enter image description here

2/28/2015 5:40:00 PM

The author of Sublime Text, Jon Skinner, wrote a small python script:

Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.

I can't link the animation here, as it uses javascript to animate itself, but it's all explained here, and the source code is available here.