Hype, by developers Tumult, seems to have a rather appropriate title. There has been a great deal of talk about this web animation app since its release some months ago, and that can hardly be a surprise, given that it claims to allow the user to create “beautiful HTML5 web content” and animations with no coding required, and that it is developed by a pair of ex-Apple engineers.

Does it deliver on its promises, or does this app get too much “hype” for its own good?

The state of animation on the web

Lets be honest: unless you have been living under a rock for the past 15 years (in which case it would be surprising to find you reading this), you will know very well that Flash has been the tool of choice for most animation on the web up until relatively recently. For over a decade now it has been (and continues to be in many cases) the de-facto standard for animated content on the web. The reasons for this are many, including the wide install-base of the Flash browser plugin, and the fast that Flash as a platform has a relatively low barrier to entry, (it is possible to learn the basics very quickly for most people), and is very flexible (you can build everything from a simple button up to full, interactive, websites).

It is only within the past year or two that CSS3 has reached a stage where browser vendors have been interested in starting to support the burgeoning standard, and even now support is far from universal. The latest builds of Safari and Chrome carry the best support, with Firefox and Opera shortly behind. IE9 has added some CSS3 support, but any version prior to that will see no love for your animated creations.

CSS3 brings with it the possibility of animating elements individually using nothing but the same kind of code web developers generate daily anyway (albeit with some new syntax to learn), and these animations will work on iOS devices such as the iPad and iPhone while Flash, famously, will not.

Javascript also has a part to play in this equation, too. It is possible to leverage Javascript’s control over the page to animate elements, but for most people the code needed to do this is simply too arduous to write. jQuery makes things a great deal easier by including a framework that you can build around (basically allowing you to set end values for CSS attributes such as position or opacity and doing all the work in-between for you).

Up steps Hype

The main problem with the use of CSS3 and/or Javascript to achieve your animation goals, though, is that you have to know (and write) a lot of code if you are hoping to achieve anything but the most simple of animations. Secondly, the lack of an immediate visual representation of what you are doing will make this a difficult approach for many people. For example, you might want to move an image from point a, to point b. Point a is easy – that is probably where the image starts, but where is point b? How many pixels do you need to move it to get it in just the right place?

This is where Hype comes in. Hype is essentially a WYSIWYG front-end to all of this coding, allowing users to produce the same effects using the same techniques (and theoretically producing the same code) as described above. The main advantage with this is that it takes away the high barrier to entry that CSS/Javascript animation presents to most people. With Hype, you never have to write a line of code (if you don’t want to).

Hype's user interface should feel instantly familiar to anyone who has worked with, or seen, Flash in the past.

Hype will seem instantly familiar to anyone who has had even passing experience with Adobe’s Flash authoring environment. Sure, the pallettes and toolbars are different, but the essence is the same. You drag elements to a stage and animate various properties including their position and opacity using keyframes. Sound familiar? That’s because it is. Just about every time-based media application, including video editors, effects packages, and Flash itself, operate using this method, or a variation thereof.

Using Hype

Whether or not you have had any experience with animation or time-based media before, Hype should not be a hard application to pick up and learn. On the whole, the interface is remarkably intuitive. It feels rather like a cross between Apple’s Pages and a WYSIWYG web editor, which in actuality is quite similar to what it is.

Hype's scenes bar makes it easy to add and rearrange the scenes in your project

The main focus of Hype’s user interface is the stage, onto which you place images, text and other elements to compose your design. Above this is the scenes strip – Scenes allow the user to compose more complex animations composed of multiple separate compositions, similar to the different shots in a video project. At the bottom of the window is the timeline, which lists all the elements in which ever scene the user is currently editing. Separate to this window is the inspector pallette, which houses all the controls and settings for the elements placed on the stage, including text formatting, sizing and positioning, color and animation.

Hypes timeline gives users a quick view of their keyframes, and the attributes that are animated

To animate an element, it is a simple matter of placing it on the stage and creating a couple of “keyframes” to animate between. With the timeline scrubber on a keyframe, any settings you change for that element will be changed for that frame, and animated to from previous keyframes. It is a simple matter to set up a couple of keyframes and fade an element in or move it from point a to point b, or to rotate an item over time. Set your starting state with one keyframe, and your end state with another, and Hype does the rest.

You can even set a keyframe and hit the “record” button and move elements around, and Hype will record all the animation in the meantime and automatically set up the options for you. What Hype does not do, however, is offer any easing options (which would allow a user to have an animation “ease” in and out, meaning that the animation starts out and ends at a slower pace than in the middle, which often looks more natural than a purely linear animation such as those Hype generates).

After about 30 minutes playing with Hype, you will likely have a fairly good handle on the bulk of the WYSIWYG portion of the app, and you may be ready to try exporting your first basic animation. Before doing that, you should probably preview your animation in a browser, and here Hype has you covered.

If you have Google Chrome installed, Hype allows you to preview a temporary version of your composition in one click. If all looks ok there, then it is time to export your animation. It is worth noting the document settings tab in the inspector at this stage, which allows you to set your target browsers (which dictates what warnings Hype will show you when exporting).

Hype will display warnings about your content based upon what browsers you tell it you are looking for your animation to work in. This is particularly useful for the less experienced user, who likely will not know about the various capabilities and shortfallings of different browsers. Hype tests against a good range of common browsers, including Safari (both mobile and desktop versions), Chrome, Firefox and, importantly, Internet Explorer from the current version 9 down to the antiquated but rapidly dying version 6.

Hype's browser warnings will be useful for novices

It is my feeling that hobbyists and beginners in the web-world will benefit hugely from the ease of use and built-in compatibility checking that Hype offers, and that helps make it a compelling choice for those users. Backing this up is an ability to dive under the hood and manually edit the Javascripts that lie underneath, allowing a greater amount of control for those who want or are able to take it.

The Problem

The problem with so much Hype is that it is often extremely difficult to live up to. This, sadly, is also the case here. Hype has a number of problems that to some may be no big thing, but to others will be deal-breakers.

First, and lets make this very clear, Hype has at most a “fleeting” relationship with HTML5: Yes, it is possible to add video to your Hype projects and this will be added using the HTML5 <video> tag, and yes, Hype will use the new HTML5 shortened doctype declaration for the documents it exports, but that is about where the relationship ends.

What Hype actually exports, on the whole, is good-old HTML4, CSS3 and Javascript. This is fine, but why tout HTML5 when HTML5 actually has so little to do with the product itself? Hype makes no use of any of the new semantic elements provided by HTML5 (such as header, footer, nav, section, article etc.), nor does it make use of any of the other useful things HTML5 allows you to do. This means no web-workers, no local data storage, and perhaps most importantly, no history API.

That Hype is lacking in ability in these areas may seem like a small concern, but the fact that the History API is totally absent means that animations made with Hype “break” the browser’s back button; Imagine you wanted to create a set of slides to go with a presentation using Hype. That’s fine, but good luck if you want to be able to link anyone to a particular slide, or to allow users to page back and forth between said slides using standard browsers controls, such as the back and forward buttons, keyboard shortcuts or mouse/trackpad gestures. None of this will work with a Hype animation unless you delve in to the script yourself and add the features in. Whilst there will undoubtedly be some potential users of this app who are skilled enough to do this, does it not kind of defeat the point of having a WYSIWYG app in the first place, if it leaves you having to fill in holes after you have used it?

Hype also makes no use of Canvas elements, meaning that each element placed in your animation will be wrapped in a div. This is not only a semantic nightmare, but fails to make use of a powerful feature available in most of the browsers that the technology Hype uses targets. I can understand not supporting new, untested, poorly supported features such as WebGL, but Canvas is supported natively by each of the major browsers at their current versions, and plugins are even available for IE8 and below to enable support there.

The final significant problem with Hype is that instead of leveraging any kind of existing framework such as jQuery or Prototype, the developers have chosen to create their own animation Javascript library. This is great, in that it places no dependency on outside scripts, but the downside is that even on a very short animation with only a couple of transitions, the Javascript weighs in at over 95Kb. That’s one large script file!

I can only imagine how this might end up with a 10-scene masterpiece with 50 animated elements in each scene. The main problem here is that this file will be served to users viewing your animation regardless of whether their browser needs it all or not. Many users with up-to-date browsers will have support for CSS3 animation, and so won’t need a lot of what is contained therein, but the server won’t know that so will serve it anyway. This has the potential to be quite a drag on your server.

The Verdict

I really wanted to love Hype because it represents an alternative to Flash that was based around technology natively supported by web browsers rather than by a plugin that, let’s admit it, has never been very good on Mac. There is no doubt that Hype is easy to use, and you can create some nice looking results relatively quickly. The interface is, on the whole, intuitive and responsive and the app itself behaves very well.

However, there are just too many shortcomings for my liking when it comes to the actual content that Hype generates. For an app that markets itself on building “HTML5″ web content, the lack of any kind of support for the history API is baffling. I understand that this is not supported by older browsers, but there are workarounds. The fact is that Tumult just haven’t implemented them. This is particularly surprising when you consider that they paid enough attention to detail to implement “old-fashioned” Javascript animation for those browsers that don’t support CSS3.

With that being said though, Hype is a perfect choice for those wanting to get started with animation on the web without the expensive entry point of Flash, or the necessity for an encyclopaedic knowledge of code. It is easy enough to pick up and use with a very limited learning curve, and does produce good results visually.

Its interface is mostly very polished, and the app itself seems very reliable. At a relatively low price point of $29.99, Hype does constitute a good entry point for most people. Experienced web professionals, though, may find the many short-fallings mentioned here more of an issue, and may want to learn to do things the hard way, instead.

As a professional web developer myself, this puts me in a quandary in trying to come to an overall opinion about Hype. On one hand, Hype is an easy, relatively inexpensive entry point to the world of animation on the web for a great number of potential users. On the other hand, I personally would prefer that the code that came out the other side was of a higher quality, and that accessibility and usability of the exported product weren’t second class citizens here. I’m a huge advocate for a better quality websites, and I have felt over the past 10 years of development that Flash is a prime culprit of exactly this kind of sin: low-quality websites produced by all because an application made it too easy.

It’s a toss-up for me between whether to encourage users to give Hype a go and hope that it leads them to learn more about the platform they are developing for, or whether to discourage them from picking up a piece of software that could lead them down much the same road as Dreamweaver or similar WYSIWYG applications, leaving them with bad websites and no deeper understanding of how things work under the bonnet than before they started.

What do you think about Hype? Have you used it? Are you a hobbyist or a professional? Let us know in the comments!