Hype 2: The Simplest Way to Make Web Animation

Flash died in 2007, and everyone’s been catching up since then. It’d long since been the worst part of the web, responsible for buzzing fans and auto-playing audio, but it took the advent of modern touch devices to make it outdated for good. That didn’t mean animated websites were gone along with Flash, though — it only meant we’d need more creative solutions.

Into the void came Hype, the Mac app that made it easy to create web-ready animations with just HTML, CSS, and Javascript — but without any coding. It brought drag-and-drop simplicity back to online animations. And now, just over 2 years after it was introduced, Hype 2 is here and is better than ever. It’s the simplest way to make interactive and animated content for the web — indeed, it’s as simple as making a Keynote presentation.

Simplifying Fancy Website Creation

For all the talk of flatter and minimal designs today, animation is still fully in vogue. iOS 7′s homescreen features a snazzy parallax animation with your wallpaper and homescreen icons, Safari’s homescreen icons zoom out when you select them, and every automobile, fashion, and restaurant site seems to be designed to show off as many animations as possible. But then, there’s plenty of practical uses for animation, from slide transitions in Keynote and PowerPoint presentations to interactive web apps that feel as responsive as their native counterparts.

Animation used to be the sole domain of Flash on the web, but with HTML5, CSS3, and some JavaScript wizardry you can make animations today that put their Flash counterparts to shame. Just a quick browse through Safari’s HTML5 Showcase, Chrome’s Experiments, and the numerous code snippets on CodePen and more will leave you amazed at what browsers can do today. But high quality web development is already difficult; add animation to it, and you’ve got something far more than most people can take on.

That is, if you don’t have Hype. Hype is designed to take the complexity out of interactive and animated web design, making it as simple as making an animated Keynote presentation while keeping your code clean, standards compliant, and ready to use on any device with absolutely zero coding on your part. Just take a minute to watch this intro video to see how simple it is to use:

You just add in your elements, choose how you want them to act, and Hype does the rest. You can then host it as a new site, or copy just 3 lines of code and embed the animation as a banner or element in any site. It’s rather magical.

New in Two

But then, simple web animation has been Hype’s domain since it was first released. That’s nothing new. But Hype 2 makes it better than ever. You can make richer animations than ever with Hype 2′s new support for curved motion paths. Just drag out your object’s motion line to the points you want, and it’ll be automatically animated along that line, perfect for building interactive web apps and games. Speaking of objects, it’s now simpler to add rounded shapes to your sites, all in CSS. And when stuff moves around, you likely want audio, which is where Hype 2′s rich support for HTML5 audio comes in. You can have sounds play at specific points throughout the animation, or on user action, giving real-time feedback in your Hype-powered web games and more.

It’s not just about animated objects, fancy pictures, and sound — Hype is still about making great websites filled with content, and this time makes it easier to make that content look and work great. It’s got Google Fonts’ full font library built-in, so you can easily integrate any of the hundreds of Google Fonts directly into your Hype site just as easily as if the font was on your computer. And if you use an alternate web font service, you can just paste in your CSS code and use any other web font directly in your design. Or, just stick to the basics: Hype will show you what fonts are web safe and iOS safe, so you can make the best possible designs for the devices your targeting. It’ll then make sure your text gets discovered, by including SEO-friendly text and tags in your code no matter what kind of site you’re making.

Last but not least, Hype 2 is designed to be mobile first, with direct support for touch events built-into your default interactions. Tie it with the free Hype Reflect iOS app, and you can live preview your web designs on your iPhone or iPad and make sure everything works just as simply as you can test it in your desktop browser. Everything that works in Hype works on mobile, and you can even build interactive web apps with Hype that take advantage of browser cache so your site can be saved and run offline on an iOS device.

Then, you can embed your Hype animations in an iBooks eBook with iBooks Author, making Hype the best way to create interactive diagrams and more in textbooks and storybooks designed for iOS. Mobile absolutely isn’t a second class citizen anymore — if anything, Hype makes the most sense if you’re making content for mobile. And with Hype 2, it’s never been simpler to make great animated sites that work everywhere.

Conclusion

In our original review of Hype 1, we noted that the code produced by Hype isn’t strictly HTML5, instead relying heavily on JavaScript to get your animations online. That complaint could largely still be true — take apart your Hype site’s code, and you’ll notice that most of the magic is from divs with inline CSS tied together with the hype_generated_script.js file. Hype 2 takes advantage of a lot more HTML5 features, from audio and web font support to offline storage that works even on mobile devices, but you sure will still find it rather difficult to take apart the code and tweak it entirely without a copy of Hype.

But then, is that really so bad? You’ve got an app that democratizes the best of today’s website creation, making it as easy as a few clicks, and it gives you code that runs smoothly in any modern web browser. JavaScript powered or not, that’s impressive. It’s something all of us can use to make interactive content for mobile and the web that works great, for just $30.

Hype might power some ugly web ads and overly animated kids sites, but it’s also already found its place in the business world. You’ll find diagrams, infographs, and animations already in use on Reuters, where their team used Hype to show detailed info about Boeing’s 787 Dreamliner, and on the LA Times where Hype helped create a rather impressive diagram showing how Cirque du Soleil’s “Iris” production worked. I can’t think of a better tool for these and other similar diagrams that take modern journalism beyond the printed word, and can only hope that most museum sites would revamp their graphics this nicely.

If you’re wanting to make animations for the web or mobile, Hype 2 is easily one of the best tools out there. It’s reasonably priced, incredibly simple to use, and just works. It’s great.