By Dan Mall
Standards-based animation has grown leaps and bounds over the last year, but responsibility for it still lives in the land of the developer. Let’s be honest: syntactically, CSS transitions are more than a bit intimidating for the code-conservative designer. Having the experience we have in motion design, we’ve created an incredibly flexible system for designers to animate and developers to simultaneously create and refine functionality. However, this system is largely tailored to a workflow built around Adobe Flash, a tool we love because it doesn’t restrict us to working in a particular way.
As the execution of our work varies, we’re continually searching for other tools that allow the same flexibility within a set of different technologies. Here are our findings from our still-in-progress search for an HTML5 IDE.
Opening Sencha Animator for the first time was comforting, as the interface looks somewhat similar to Flash. The app also starts with a tutorial built right into the interface, so getting up and running was a breeze. Modifying CSS properties over time was pretty simple too, due to the thoroughness of the inspectors.
My biggest complaints about Sencha Animator:
- I believe the interface is built in as a website (probably with Sencha’s own Ext JS framework), and sometimes dragging within the UI actually selects the UI instead of manipulating objects within it.
- I couldn’t find anyplace where assets were stored (like Flash’s library), which would make reusing them much easier.
- There’s no multiple file import, so assets have to be imported one at a time. This makes importing things like an image sequence a completely laborious and manual process.
Sencha actually released the first beta a few days ago that I haven’t played with yet, so it’s quite possible that these things are fixed. I’ll be eager to see what David Kaneda and team have up their sleeves.
Radi seemed a bit complex from the start. After toying with it for a bit, the most solid conclusion I came to was that it’s sort of like After Effects, but specifically designed to output HTML5 content (
<canvas>, <video>, etc). Seems pretty cool, but probably doesn’t have an audience with people like me.
In related news, here are some options that don’t quite meet the conditions of this test, but are interesting nonetheless…
- Edit Room is a browser-based visual CSS animation designer that has some great features in it. It’s still an early release, so you can’t do crucial things (like saving the HTML and CSS from what you create), but there are some pretty smart interactions that I’d love to see in software like Flash and After Effects.
- Maqetta is a browser-based tool designed to easily create UI.
- Ceaser is tailored for those that already hand-code CSS animations. Taking Robert Penner’s wonderful easing equations, Ceaser gives you a visual way to animate and generates well-formatted CSS for you to use. We love this and have already started using it.
- We don’t know much about Animatable, other than the fact that Andy Clarke announced it at An Event Apart Boston. There’s a little video demo on the landing page that teases the app by showing how it was used for the Madmanimation demo. It’s certainly one to keep a close eye on, especially for the crew that’s working on it.
- At last year’s MAX, our friends at Adobe showed a preview of the Edge Prototype tool for HTML5. This looks awesome.
Rumor has it…I’ve already said too much.
While all these apps have great qualities, only a few come close to the level of quality we’d like to continue creating great experiences. Most of that is due to the fact that these solutions are still in early stages, so we’re looking forward to seeing the progress in each of them. We’ll continue our search, but if you’ve found anything worthy, we’d love to hear about it!