The Evolution of Web Animation

Animation on the web started way back in the early days of the Internet with just GIFs (Graphic Interchange Format), which were then introduced in the late 1980s. GIFs are often used for short loop pixel animations and also some video but it didn’t provide much of an interaction with users.

 

video to .gif of a cat

via gifs.com

 

Flash animation then came into the scene and has enabled websites to add animation and sound to their pages. By this time, animation was simple and allows vector-based animation instead of the low resolution and often pixelated sequences GIFs offered. Flash animations are made in Adobe Flash, among other animating software and come in the SWF format. A problem with Flash is it does not work well with smartphones and many mobile devices and is now not supported by Apple and all its devices. When Steve Jobs decided to stop supporting Flash, he said,

 

Flash was created during the PC era – for PCs and mice. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

 

As web designs today should be responsive and therefore should be accessible and function well on all platforms and devices, then web animation also has to work on all screen types and sizes from a 5-in 720p smartphone and 9.7-in QXGA tablet, to a 29-in UHD monitor. The programming languages that have achieved this evolution in web design and animation include HTML5, CSS3, JavaScript, and SVG or scalable graphics. Along with the updated web animation support, though, is a wider range of things you should consider when implementing web animation. Technology has made devices mature quickly, allowing most of them to handle high-resolution content. But this doesn’t mean you should go overboard, or else it would make your website look too “busy”. Web animation should also allow for cross-platform support. Animation in today’s time has to be made sure it looks great on various devices with a lot of factors to consider. Testing for compatibility takes time since it has to cover different aspect rations, portrait or landscape page orientations, pixel density, and viewing distances.

 

When looking into incorporating web animation into your page or website, there are pros and cons to consider when it comes to each animation technique.

 

PROSCONS
GIF
  • simple and easily accessible
  • allows both short loop pixel animation and video-like animation
  • heavy files, resulting to low resolution pixelated sequence
  • no alpha channel
  • low compression
  • bad transparency
  • limited 8-bit palette, resulting to dithering
Flash
  • simple, vector-based
  • interactive
  • lightweight, loads faster
  • offers more potential for dynamic web design
  • not supported by mobile platforms
HTML5/CSS3
  • simple and easy to learn
  • can be viewed on all platforms and devices
  • can manipulate SVG
  • suitable for transition and transformation behaviors
  • allows vector and pixel animation
  • limited and often requires JavaScript or a SMIL
  • only for static animation
  • cannot respond to new inputs (dynamic animation)
JavaScript
  • animation is easy when using SVG animation library generating image (.png) sequence
  • not preserved when the SVG is embedded as an image

 

Other techniques used in web animation also include APGN and SMIL, although they are not supported in all browsers.

 

Treat the use of animation on the web just like a design decision with the outcome an improvement to the overall appearance and user experience on your website. For more information on web animation, explainer videos, and web design, get in touch with MicroCreatives, a creative outsourcing and design agency based in the Philippines. Our web designers, animators, motion graphics artist, and web developers will work with you to create seamless and interactive web animation and integrate it into your responsive and user-friendly UI/UX web design.