Web Animation in a Flash-less world
As an avid Flash guy I have been disheartened to see the fall of Flash as it lost support across the internet. Apple may have put the final bullet in it, but with the rise of so many other options perhaps it was inevitable. Now days Flash seems to be a dirty word although I think there is still a place for it even if it is in the corner of my heart (sigh). So where do we turn? I’ve felt somewhat adrift with the options out there so I’ve compiled a list of what some of the alternatives are for us animators.
There’s nothing going back to your roots when it comes to animation and an animated gif is as roots as it gets. Basically an animated gif is a series of images that are put together into a file. it can loop or play through a specified number of times. It can be transparent to a degree or opaque. Files tend to be large depending on the amount of colors used and the duration.
Pros: animated gifs have been around forever so they work on pretty much everything regardless of device, operating system and browser. Easy to generate out of shareware or standard tools like Photoshop. Even converting video to animated gif can have some success with some tweaking.
Cons: Can get pretty slow based on the machine. Old tablets and phones struggle. This is partly due to the fact that they use frame delay instead of frames per second so every browser interpolates it differently. Can also get pretty big in file size. Where flash used math to calculate the animation between key frames, animated gifs has to make every frame an image. Not search engine friendly. No support for true transparency as you have to define the color of the edges.
A development that came about recently was the ability to embed video directly into an HTML page. This allowed us to use video seamlessly inside a layout to make animated backgrounds, visual elements and even buttons that worked well, we’re nice and fast and animator a could go to town using the tools they use best. And best of all – worked on phones and tablets… at least for awhile. Apple was getting flack from the media about short battery life in the new iphone 5 and part of the reason was due to video streaming. Whether or not this was a reaction to this or not Apple released an update to iOS that stopped embedded video from auto playing. This essentially killed this style of seamless video animation because now the user has to initiate the video in order for it to play. It’s can still be used but only under those circumstances.
Pros: Consistent speed and streaming across browsers. Allows for a high sophistication of animation such as After Effects or 3D. Able to use sound easily.
Cons: Autorun now disabled by Apple so not a viable option on iOS devices. Not SEO friendly. Can be hard on data plans as streaming video can be taxing.
CSS animation is exactly that: Using stylesheets to animate. The reason it’s called CSS3 over just CSS is that it’s using tags that are only supported in newer browsers. Basically you are using key frames and specifying their duration, number of repeats and behavior using styles.
Pros: fairly easy to use, big community so lots of documentation or snippets to borrow, can use the orientation for mobile and tablet devices.
Cons: Hardware can affect the performance so older machines/devices will chug somewhat, hard to write your own animations. Lack of browser support especially with IE8 and older (http://caniuse.com/#cats=CSS) which is still a significant market.
Pros: Create simple shapes quite easily, great control over full screen effects and video. Animation speeds are fast and pretty consistent on all browsers, including mobile devices.
Cons: When using Canvas you are defining pixels not objects, not supported by all browsers – again spotty support for IE8 and lower included making this tough to implement (http://caniuse.com/#cats=HTML5) (but not impossible as there are some workarounds). Currently very few WYSIWYG editors so you are generally stuck with a text editor.
XML-based vector graphics format and supports both animation and interaction. The big things with SVG are the fact that it’s resolution independent so it will scale well and still look nice and crisp and the fact that it’s got an external XML sheet allowing you to manipulate the animations etc. dynamically.
Pros: Vector based so resolution isn’t an issue, good support for animation, XML based so can be powerful when built into applications where the XML is changed dynamically.
Cons: Uses the DOM so can slow down depending on the amount of animation appearing at one time. Again, poor browser support: http://caniuse.com/svg
So what do I use?
Unsurprisingly, there’s no one solution that fits all at the moment. With tools like Adobe’s Edge Suite constantly evolving we may be back in a position where designers and animators can take the handcuffs off and do what they do best again. It feels like we’re struggling at the moment to find something to hang our hats on so it really is keeping an eye on everything that’s available and until one or two methods start dominating the space I would recommend looking at every project on a case by case basis. Depending on what platforms and browsers you are trying to support would narrow these options very quickly and then it just comes down to what you are most comfortable with.
(Photo credit above to Ralph the Cat.)