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.
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.
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.
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.