Hype 2.5 review: Tumult’s ‘love letter’ update to its users is a triumph

As someone who despised WYSIWYG software for most of her life, I found myself rather shocked to be enjoying Tumult’s HTML5 web and animation software, Hype, when it first came on the scene in 2011. Our initial review praised the software for its excellent HTML5 animation and website-building tools, and the app has only gotten better over the last few years. Its latest update, which Tumult calls “a love letter to our users,” makes an already fantastic piece of software downright essential for anyone who is interested in building complex, scaling HTML5 animations but is lacking in HTML, CSS, or Javascript expertise.

All hail flexible layouts

I had my first foray into building a website with responsive design back in 2012. From that experience, I learned far too much about scaling, device-widths, and all sorts of fun CSS rules that start with “@” and end with lots of pounding on a keyboard at 2:00 A.M.

In contrast to all that, Hype’s responsive controls are almost laughably simple. To enable them, just check the Scale box under the document inspector, then use the Pins & Sizing controls under Flexible Layout. You can also adjust the way your elements scale when a window is resized by adjusting the Scaling Behavior dropdown: Choose to stretch your element, or preserve its aspect ratio by shrinking to fit or expanding to fill.

If you’re an iOS developer, you might recognize the style of Hype’s responsive design implementation; in fact, Tumult openly acknowledged taking a card from iOS’s “Springs and Struts” model when building Hype’s responsive tools. “Our users create all kinds of different content, from infographics to children’s books, so we wanted a system that had been proven to work well on a wide range of documents,” co-founder Jonathan Deutsch told Macworld in an email. “From a user interface perspective, the notion of pinning to sides seemed very straightforward, and with the example area users can immediately see how the element will behave.”

That aforementioned example area is an excellent touch, and typical of the care and respect Tumult has for Hype’s users. The app doesn’t expect you to be familiar with responsive design or “Springs and Struts”; even if you’ve never dealt with it before, the example area quickly helps you start working responsively. The tools aren’t perfect for every task—in the test animation I built, for example, I had trouble getting an absolutely-positioned element to scale but stay in the same place as the window was resized—but they’re great for the majority of your basic responsive projects.

Not just for the Web anymore

From the start, Hype has been a pretty nifty program for building basic animations, but it was an HTML tool first and foremost; if you wanted to display your creation, you needed to host it online, and varying CSS browser standards meant that your viewers might not always have seen what you intended. This is no strike against Hype; the app tries very hard to make sure your project is fully cross-compatible for all computers and browsers. But depending on what you’ve built, it may not always succeed.

Hype 2.5 addresses this issue in a major way, offering two alternative platforms for viewing animations: video and GIF animation. HTML5 is still clearly the program’s focus, but in expanding its export options, Hype 2.5 has opened itself up to an entirely new kind of user: budding animators.

Now, I have no intention of ever making animation more than an occasional hobby, but it was astonishing how quickly I was able to put a basic piece together. The drawing and lettering, done in Photoshop, took around an hour and a half; the actual animation took just about two hours, despite having to familiarize myself with Hype’s tools during that process. I don’t think the result will win me any awards, but it’s very satisfying to produce a solid piece from an evening’s worth of work.

And if your interest in animation is on the GIF side, you don’t even have to go that far. My first Hype 2.5 test was a three-second looping animation of flickering stars: drawn in a half-hour, built and exported in ten minutes.

You do need to know a little bit about keyframes to animate in Hype, but Tumult has a host of great tutorials to get you started right.

Hype Reflect, the perfect mobile accessory

Hype’s instant preview options make testing your Web project a breeze; Hype Reflect, the companion app that the company introduced in late 2013, does the same for previewing on iOS devices. The app uses your Wi-Fi network to connect with Hype on the desktop so that you can instantly see your project at the correct dimensions and make sure it’s properly scaling. You can even tweak your project on your Mac and have those changes reflected in real-time with Mirror Mode, or (if you’re building something more advanced) use the app’s JavaScript console for debugging any scripts you’ve added to your project.

Hype Reflect’s minimalist iOS 7 interface mostly stays out of the way when you’re interacting with your project in mobile, which I appreciate; its focus, after all, should be more on the project than the app’s various trimmings. Even without many controls to fuss with, however, the app offers a decent amount of flexibility between previewing, Mirror Mode, and sending your project to mobile Safari.

Tweaks, trims, and efficiency boosters

Beyond the major showcase features in Hype 2.5, Tumult did a ton of work to improve the program’s usability along with adding under-the-hood tweaks, and it shows. You can now upload Retina-sized images; Hype then automatically calibrates these images so that the right size displays for the proper device, in order to save bandwidth. Building animations is also a lot smoother with the addition of basic timeline-editing features such as element snapping, arrow key manipulations, and keyframe keyboard shortcuts.

There are new rotation options, including three-axis rotation and circular paths for elements; you can tweak each scene transition’s duration, rather than be forced to apply a master time for all scenes; and there’s a new Continue Timeline option that allows you to play the entire scene in reverse after it plays through. For JavaScript geeks, there are even APIs that hook into Hype’s timeline direction, current time, playback state, timeline duration, and scene transition duration. And French, German, Japanese, Chinese, Italian, and Spanish users can now use the app in their native tongue, as the app has been fully localized into those six additional languages.

Though these bits and bytes may seem small on their own, together they really refine an already excellent program. Retina image support and automatic image optimization cement Hype’s responsive design tools as a way to build for all platforms, while timeline improvements and new element options add more power and flavor to the program’s animation components.

Bottom line

If you’re looking to play in the world of HTML5 animation and responsive Web design without being an expert on CSS transforms and JavaScript tricks, Hype is the program to pick up. If you can think it up, Hype can probably build it. And though it may occasionally need some hand-coded help when it comes to advanced projects, it’s a great tool for almost everything else.