Three HTML5 animation tools: Adobe Edge, Sencha Animator, Tumult Hype

Tumult Hype

Another tool that gets high marks in the HTML5 animation world is Tumult Hype, a Mac OS X-only tool that makes good use of the OS X interface to build animations without the need to type in code.

If you are a Mac user, Hype is going to appeal to you immediately because of its interface. The use of the separate Inspector window is old ground to OS X users. While I can appreciate the flexibility to customize the interface by shifting its tools around (which you can't do in Animator), this is not a big selling point.

Where Hype shines is in the way it simplifies the creation of an animation. There is an actual Record button, which may be superfluous for experienced animators, but is very useful for beginners so they can get a real feel for the start and end of their animations. Edge and Animator don't have this.

In addition, the capability to drag and drop elements to the screen, record their movements and have Hype automatically insert keyframes in the timeline of the animation with no effort on the part of the user is very beginner-friendly.

Like the other tools in this review, Hype can assign interactions to any object, including the usual common actions like opening Web pages or calling up another event on the timeline, as well as any JavaScript action that you'd care to start.

Where Hype falls a little short is in the area of advanced features. You can't group objects together and apply actions or properties to those objects all at once; you have to apply actions one at a time. Nor can you expand or contract the view of the overall animation within Hype. And oddly, there isn't a Circle object by default -- just Square objects. You can modify the Squares to look like Circles, but it's strange this isn't an included object.

Hype's finished product is output as a small HTML file alongside an auto-generated folder of your images and any JQuery files that may have been produced. This puts Hype toward the JavaScript end of the HTML5 spectrum, though there's quite a bit of CSS3 code in all of the files to help speed things along for the browser. The files produced also include a "master" Hype.js library that users can place on the destination website just once to cut down on file redundancy. There's also a PIE control (PIE is a tool that enables backwards CSS3 compatibility with older versions of Internet Explorer).

One nice Hype feature that stands out: Direct integration with Dropbox for immediate sharing of files.

Despite its quirks, Hype is a tool that will work pretty well for beginners. It's clearly aimed at desktop and mobile platforms, though Hype is not robust enough yet to do more than simple animations, such as for simple demo videos or ads. The lack of essential features currently holds this app back from doing much more than that.

Bottom line

At only $29.95, Hype could be worth the look for Mac OS X users who are looking to get started in animation.

Conclusions

HTML5 animation tools offer a way to create Flash-free, standards-based animations for website developers. They run the gamut of sophistication.

Beginners will benefit equally from using Sencha Animator or Tumult Hype, though Mac OS X beginners will likely appreciate Hype's lower price tag.

More experienced developers should definitely start with Animator, which also offers enough functionality to get into more complex animations later. That Animator is available on Linux as well as Mac OS X and Windows is also a benefit for the many Linux-based developers out there. The near-$200 price point, though, means your commitment will need to be on the serious side.

Depending on where it ends up on the price scale, Adobe Edge may well corner the intermediate-to-advanced user base, at least on Windows and OS X. It definitely has the most complete set of tools, so it can pull together very rich animations quickly. But it's not a beginner's application.

Brian Proffitt is a veteran Linux and open source journalist/analyst with experience in a variety of technologies, including cloud, virtualization, and consumer devices.