One of the most promising areas of ongoing development in the field of web design is HTML5 animation. Ever since Steve Jobs officially blackballed Adobe Flash on the iOS platform, there’s been a major trend of moving away from Flash for animations and towards the use of native HTML5. Obviously, Flash animators will need to change with the times and transfer their skills to a new platform. HTML5, CSS3 and JavaScript can largely replicate the Flash experience while using fewer resources, although the HTML5-based animation ecosystem isn’t fully mature. Fortunately, there are a number of powerful HTML5 animation editors out there for web designers at all skill levels. Here are three of the best currently available.
Tumult’s Hype
Quite possibly one of the most promising HTML5 design tools for animators at the moment is Hype from Tumult, a Mac-based program for crafting cutting-edge animations quickly and easily. It enables designers and even amateurs to put together animations without requiring any manual coding. It works much like PowerPoint in everyday usage, employing slides or “Scenes” to allow designers to lay the groundwork of an animation before diving into more complicated tasks. It features Timelines, a versatile Inspector tool for modifying even minor aspects of any given slide and support for click-based mouse interactivity. Available for $49.99 from the Mac App Store, it’s one of the best HTML5 editors available.
Hippo Animator
Sometimes, it seems like all of the innovative design tools tend to favor Apple and their Mac OS X platform. That’s not the case with Hippo Animator, a web-based HTML5 design suite that’s available only for Windows. It’ll cost $30 for a license, although they do offer a free trial to give users a look at what it’s capable of. Though a bit basic when compared to other editors, it’s still a full-featured HTML5 animation tool that’s quite capable even in the hands of beginners. Hippo Animator features tons of handy tutorials for learning the ropes, support for over 30 languages and cross-platform compatibility with every browser from Safari to Windows Phone 7.
Adobe Edge
Even though it’s officially available only as a free preview, Adobe Edge is one of the most promising HTML5 editors that can be had at present. Like Photoshop, Fireworks and Illustrator, Edge is available in both Windows and Mac OS X versions. It’s probably the best HTML5 editor for those with a strong Flash background. In a nutshell, Edge is a comprehensive program that allows designers to utilize CSS animation syntax and HTML5 elements to construct simple and even complex animations within a rich development environment. It features keyframe timelines, drag-and-drop functionality and much, much more. There’s no word on how much it will cost when it’s finally released in its finished form, but it can be downloaded free of charge for the time being.
Final Thoughts
Though by no means the only HTML5 animation tools on the market, the aforementioned examples are definitely a great way to get started with non-Flash web animation. As more and more developers hop on the bandwagon, HTML5 will eventually succeed Flash as the preferred way of animating just about everything on the web. The shift away from Flash isn’t necessarily bad for Adobe, which has rolled with the punches and developed their own editing tools for HTML5. Regardless of what happens, there’s going to be a lot of exciting changes in the field of HTML5 animation in the coming years.