: 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? https://www.zoho.com/creator/ Watch the PNG

@YK2262411

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.

Vote Up Vote Down

@Mendez620

You can simply use Adobe Photoshop to create similar looking animations, even BETTER animations than the one shown in the link, without the knowledge of any CSS3 Animations or JavaScript/jQuery etc.

You can go to Window > Animation in older versions, or Window > Workspace > Motion in the latest version (CC).

Vote Up Vote Down

@Si6392903

To animate a png inside a webpage you need to know either JavaScript or Css3 animation. www.w3schools.com/css/css3_animations.asp
You also can make an animated gif.

Vote Up Vote Down

@Sherry646

The animation was built in the code itself (js, html, css)

Vote Up Vote Down