Hype 1.0.3 lets you create HTML 5 animations without coding

With Tumult’s Hype 1.0.3, you can create interactive HTML 5 animations without typing a single line of code. It’s simple enough to use that even novices will get great-looking results quickly, although there’s room for improvement. Limited design tools and an inflexible interface can interfere with building complex projects.

Design your scenes

Hype projects consist of one or more scenes, which function like slides in a Keynote presentation. Scenes can contain text, images, videos, and other elements, although importing audio files isn’t yet supported. It’s easy to precisely arrange and customize elements thanks to snap-to guides and auto-alignment commands. Hype’s Inspector lets you fine-tune properties like angle, color, and opacity while alerting you to potential incompatibilities with a customizable list of browsers as you work.

Hype’s iWork-like design tools are simple to use, but they lack many familiar features. Elements can’t be locked in place or grouped, and squares are the only built-in shapes available to add to scenes (although they can be tweaked to form rules or circles). There are no contextual menus, no image editing or masking tools, and no way to enlarge or reduce your view of the workspace, making it difficult to create large documents on Macs with small displays. These issues aren’t necessarily deal breakers, but they’re unfortunate omissions in an otherwise polished application.

Adding motion and interactivity

To animate an element, you select one or more of its properties (position, for instance), then add start and stop keyframes to Hype’s timeline and create different states at each point. Hype creates the “in-between” frames for you. A handy record feature simplifies the process by monitoring your actions and automatically creating keyframes and changing properties on the fly. You can also create multiple animations to give elements different appearances within an animated scene, like images that glow or fade on mouse-over. Animations, scene transitions (with optional dissolve or push effects), and even JavaScript actions can occur automatically, or in response to user events like mouse clicks, mouse overs, and key presses. You can preview projects in Hype or your browser at any time to see exactly how animations will appear.

To fine-tune a project’s timing, keyframes can be freely repositioned, and the animations between them lengthened or shortened, in the timeline. Double-clicking animations there lets you enter exact keyframe start times, set animation durations, and choose whether animations ease in or out as they play. Managing multiple animations in the timeline can be difficult in projects with numerous elements, however. Element properties appear in a list beside the timeline, and seeing many of them together requires that you have a large screen—that or you must enlarge the timeline’s pane, obscuring your workspace. Elements can be dragged closer to each other in the list for easier comparison, but doing so also affects whether they appear above or beneath other elements in the scene.

Export and share

When your project is finished, you can export it to your Dropbox public folder to share with the world, or to an HTML 5 document and resources folder. These can be added to an existing site by selecting a few lines of clearly marked code from the exported HTML file, pasting them into an existing HTML document, then uploading the resources. An optional compatibility check at export lets you know which browsers, if any, will have issues playing your final project.

Here’s the site I created with Hype, exported to Dropbox.

Macworld’s buying advice

Despite feature omissions and limitations, Hype 1.0.3 makes it easy and even fun to create HTML 5 Web animations or entire sites. But users looking for robust design tools should wait to see what future updates hold.

[Adam Berenstain is a freelance writer in upstate New York.]