Blog

Animation Resuscitation

The following post is from Kurt Huber, Senior Art Director at TMA+Peritus. Kurt, among others, will be guest bloggers for the 30 Day Blog. Thanks for your contribution, Kurt.

Day 16: Flash animations have been on the decline for the last several years, due largely to Apple’s decision to exclude it for reasons of security, browser instability and high CPU usage on all of its devices, and most of the other manufacturers followed suit.

There is now a viable animation alternative to Flash called SVG - Scalable Vector Graphics, and it’s a top web trend for 2014. SVGs are vector-based lines, text, colors and shapes defined by geometry, rather than a conventional raster image or photo, which is comprised of many tiny colored pixels. SVGs keep page load times to a minimum and they allow for zooming in for close ups without looking pixellated, because they re-render after each zoom. SVGs can easily double in size for retina devices, they eliminate the need for separate images for multiple browser width scenarios, and they also print well. SVG animations work well with all major web browsers and mobile devices. Animations can range from subtle design touches to large, detailed animations and even interactive games. SVG is also an excellent choice for static images.

When used properly to tell your story, sell your products, or for just as a little bit of bling, SVG animations can breathe new life into your website on any device. The key to their success is knowing your audience and making sure your animations are a help and not a hinderance to viewing critical information.

SVG in action:
http://svg-wow.org/camera/camera.xhtml
http://snapsvg.io/demos/
http://tympanus.net/Development/AnimatedSVGIcons/
http://tympanus.net/Development/SVGDrawingAnimation/