15

What formats supporting animation are suitable for the web and what are the pros and cons of each.

1

4 Answers 4

14

It depends on what type of animation you need.

  • .gif images - Fully supported, but limited use with frames. .png files are supposed to have support for animation, but you don't see it in the wild very often, if at all.
  • Flash, Silverlight, and other plugins - Flash is pretty much discontinued now, but had the most ubiquity, but all plugins need to be installed in the browsers and can't necessarily be counted on to be installed on a user's computer. May not work for mobile platforms.
  • CSS3 - Limited transforms or animations, mostly supported (nowadays)
  • HTML5 video
  • JavaScript - Needs to be enabled, but should have near universal browser-support. (Example being Raphael.js).
  • Canvas tag - Modern browser support, but supports rich animations - it's pretty much JavaScript.
2
  • 1
    I'm going to nitpick here, but <canvas> animation is essentially JavaScript - it is just a different format on which stuff can be drawn. If you want to be precise, you should differentiate between animating HTML elements, SVG (which raphael.js uses) and HTML5 <canvas>
    – Yi Jiang
    Commented Jan 5, 2011 at 13:36
  • The difference between SVG and canvas animation in a nutshell - with SVG, every path is an element you can bind data and events like click and mouseover to and interact with like a div, while in Canvas, it's more like the browser creates things, gives them behaviour rules then forgets about them. SVG doesn't exist in IE before IE 9, which is why Raphael is awesome - it controls SVG, or, in IE6-8, it uses IE's old own-brand equivalent (called VML). The only thing I know Raphael doesn't work on is old Android stock browsers (before version 2 I think). Commented Nov 19, 2012 at 9:37
2

This is in addition to Virtuosi Media's great answer:

Apple has recently used still JPEG and PNG images for animation on their site. They use JavaScript to switch the images. It's a great technique if you don't have too many frames, need alpha transparency support, want the animation to be in place on the page and if you want wide browser support. The downside is download size and effort.

It can also be interactive. If you scroll to the Smart Cover section of Apple's iPad page, you can see it in action: http://www.apple.com/ipad/features/

1

When overlaying images that contain a transparency on-top of animated images on layers beneath the image. You will find that PNG24 is the only image format where the anti-aliasing blends correctly with the background imagery. With GIF and PNG8 you are going to find that your edges are all chunky. Doesn't look very good, but really easy to miss.

0

What about https://lottiefiles.com/ it seems it is becoming quite used?

And it seems new animation programs are also adding it as output format...

Well, it seems only (for the moment) https://www.synfig.org/ is opensource, but already support this format!

Also is voted for blender https://blender.community/c/rightclickselect/r5fbbc/?sorting=hot

1
  • Lottie is not a file type. It's a tool used to generate animations of other file types. As such this isn't really an appropriate answer. Commented Apr 6, 2022 at 3:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.