I've been playing around with Hype, an HTML5 animation tool. Hype allows you to easily add animated elements to your website without the need to write any code or third party plugins such as Flash.  My first impressions are good, easy to use interface resemblant to a bare version of the After Effects timeline with an apple look.

I started out by selecting required resolution from the presets menu which includes standard sizes such as iPhone, iPad and a few standard web resolutions, easy enough.

The animation tool was really intuitive for me coming from After Effects but I think it could use some labels to make you understand what things are. The diamond as a keyframe marker is quite universal but if Hype is the very first animation tool you've ever touched it might be a bit confusing.

After getting used to the animation timeline everything else seems quite self-explanatory, you can add behaviors when animation ends or when a button is pressed as well as easily style button states (hover, pressed, visited).

There are settings I wish it had such as the ability to set Animation Presets, a few preset transitions like the ones included in After Effects would be nice for quick and dirty animations but the biggest thing I wish it had is the ability to easily set masks like the one seen on this site: http://atomicrobotdesign.com/blog_media/svg_mask.html (*Firefox 4 needed)

Then again I think Hype is all and all a great app and with a $29.99 price-tag is quite a bargain.

If interested in trying it out, check out their website and get a free 14-day full trial.


Ivan Cruz
Senior Designer at Satellite Media