Skip Flash, Build Animations in HTML5 With Hype (YC W11)
mashable.com
mashable.com
1) If you care about accessibility or SEO at all, this tool is not for you.
2) Once you begin an "app" using HYPE, you're locked into their platform. There's no feasible way to maintain rendered animations without the software. I want to be able to bust open my favorite text editor and update stuff on-the-fly when I need to.
3) Just getting off of a project that involved heavy use of CSS animations, transitions and transforms, I can honestly say they're not that hard -- _especially_ to achieve the effects they show in their demos.
4) The types of websites they're promoting as good use cases are the types of sites we all used to be annoyed by when they were created in Flash. Not that this tool forces anyone to create crappy websites, it does enable it though. No splash screens plz.
IMHO, CSS is not meant for keyframe animations. It's not. WebKit might have a @keyframes implementation, and it does work for basic animations. But it just doesn't make sense for heavy animations.
CSS-based effects should be used as added sugar if the browser supports it. Maybe your modal windows opens with a subtle rotation/scale effect, or your slide show has some 3D perspective effects. But your entire website/app shouldn't hinge on a single piece of software trying to solve your animation woes.
Most of the examples shown on the Hype site are – and I don't want to be overdramatic here – terrible. They're the kind of inaccessible, hard-to-update, ploddingly-paced, opaque sort of web front end I had to wean myself off of half a decade ago, and open web standards and mobile compatibility don't suddenly make these practices okay again in 2011. I'm kind of dumbfounded at Gruber gushing that these constitute "a glimpse of the future."
I am excited about Hype, though. Not as a tool to build sites, but as a tool to build the kind of informational animations and animated elements for which we used to use Flash. I'm sure I'll be building all sorts of things that go into semantically-formed pages with Hype.
Indeed. They have a very David Siegel Creating Killer Websites feel to them.
Hype looks cool, I'll certainly buy a copy -- if only to see if there are some ideas I could crib...
I'm somewhat disappointed in myself because I had a bit of a head start in this market with my Radi app 5 months ago [1], but I've failed to come up with a credible path towards shipping it.
I've made six releases since the first beta with nice new features and solid improvements (IMHO), but finishing an app of this type is really difficult. Just writing the documentation will take weeks. Then coming up with some interesting tutorials and demo material may be the most difficult part because it requires inspiration and talent -- and also marketing empathy to understand what the potential customer wants to see (rather than what I think are interesting features from a technical perspective).
Congratulations to Tumult. Apparently they're only two people and they've done a great job. Compared to my lonely one-person team, that one additional person can make all the difference between shipping and getting stuck :)
I'm excited to see where you take Radi. We don't touch canvas or do anything vector at all right now, and what you've been able to accomplish by yourself is fantastic.
[1] http://www.randsinrepose.com/archives/2006/04/20/10.html
It still takes a long time for the initial page to load. We don't even get a loading bar, just a blank page and "Built with Hype" for seven seconds. When it does load, we still have to sit through all the pieces of the page sliding into place. The demos look like Flash pages straight from the 90s. And I dare suggest that Flash sites could be more SEO friendly.
Hype seems like all the annoyances of Flash under a different name. It seems to encourage bad, flashy design just as Flash did, which makes me wonder about your "[t]his is a very designer-friendly process" quote.
Seems like you answered your own question. Those are two major problems with Flash.
Inability to recognize and use the operating system font preferences like hinting, resulting in AIR apps looking ass-ugly on some systems.
Tendency to grab focus and have its own dumb hotkeys that don't match (or overlap) common/native conventions of the platform.
Its own set of security vulnerabilities and its secondary tier of cookies which browsers have no control over.
Flash not only has issues with "mobile devices", it severely hurts everyone who's trying to create new platforms - any kind of platforms. If you want to tinker with a CPU and a pair of micro-controllers, after some soldiering and bootstrapping linux on it you'll be able to run any web app you want on your very own platform, which is cool. Flash prevents this from happening in the first place.
The last paragraph is by far the #1 reason why Flash should not exist. I wish Mozilla and Google would simply drop NS extensions support one day, and the plague will be gone the day after.
What exactly does this have to do with flash though? How does flash really prevent you from doing this? I suppose you mean without a flash-player on a platform you can't run swf's? Well okay, I think "prevents" is the wrong word here, even though I don't just mean to nitpick.
The biggest selling points for flash are it's ubiquity and the fact that you get around the download-hurdle when using it. It will be a while until there is a solution that 1) addresses those two problems and 2) does everything that flash does and does it just as well. Of course flash isn't perfect, but there are good reasons for why it exists and will remain doing so for at least the near future.
Coding CSS3 based animations is currently a pain in the butt, but its certainly interesting to learn and definitely invaluable to understand how CSS3 keyframing works. Likewise with JavaScript.
Hype looks like a great tool for one-off sites like the provided demos, but integrating animated objects created with Hype looks nearly impossible. WooGrit produces this js:
http://static.tumultco.com/hype/gallery/WooGrit/WooGrit_Reso...
… which references resources such as http://static.tumultco.com/hype/gallery/WooGrit/WooGrit_Reso...
Hype will certainly have its place with the coming onslaught of HTML5 ads (/ducks), but from this developer's point of view, its a niche product.
Within Hype, you can compose custom js functions to be run in response to user actions, like mouse down. Those functions are pure js and, as such, can use any libraries included on the same page which embeds your Hype document. Hype documents also vend a js API so external scripts can trigger animations or scene changes. With those two features, the Hype document can become a seamless part of an existing web page.
I'm curious to hear more about your needs, though! Feel free to email me at ryan@tumultco.com if you'd like to chat some more.
I was also a bit surprised initially by the bundling of everything - html, css, js - into a single .js file. Certainly seems like a smooth solution for your targeted user base though. Copy/paste to embed, upload.
I'd be very interested in an 'export components' feature whereby you could export formatted css/html into distinct files/views for straightforward incorporation in larger projects, etc. (I admittedly have yet to try it, so maybe something like this is supported.)
You guys have impeccable timing as well. I'll certainly be picking up a copy!
I've been hearing that for the past few years about every new piece of technology. Hasn't happened yet.
If you think the crappy IDE is the best Flash offers, you're way off base.
We debated quite a bit over the price. Even our own opinions would sometimes change on a daily basis! (And every single person we asked seemed to have a different opinion, too... the only common answer seemed to be "I dunno, pricing is hard".)
Based on beta feedback, Mac App Store trends, prices of similar apps, and the desire to quickly grow our user base, $30 seemed like a reasonable starting point.
Anything like that in Hype? I'd imagine one of the ways would be to use something like .svg and perhaps an open-source tool, but I'm still not sure it would reach the level of Flash&Illustrator.
I mean, as a web-developer/animator, I'm all up for a cheaper product that doesn't require viewers to install Flash, and integrates into JavaScript perfectly. I am very interested in where this goes and might be one of the first users.
Frankly, I don't miss the Flash animations - 30 seconds of nonsense I have to click through before I get to see the real deal. Thank god for FlashBlock. Now I wonder if this will make folks say "ah, so you have flashblock, eh ? how about this ? html5 animations ftw...". Hopefully this will be put to more good use.
Probably an open source project so other webdevelopers can help, I would expect that it would improve fast.
- Animator offers more fine-grained control over animation curves, beyond hard coded curves like "Ease-in, Ease-out"
- Animator is entirely focused on CSS3 animations, there's very little opportunity for making interactive content beyond "click to advance to the next scene"
- Hype supports CSS3 animations as well as "heartbeat" Javascript animations, so content can be viewed on a much larger set of browsers
- Hype's Javascript support allows for custom functions to be run in response to user actions
- Hype documents provide a Javascript API for triggering animations and changing scenes which, when combined with custom JS functions, makes it easy to seamlessly integrate a Hype document into an existing page
[Edited for formatting]
With Animator, we've tried to minimize the distance between what you do in the tool and what you'd do with hand-built animations. This means that the outputted source is relatively easy to tweak as you see fit. Animations can also be fitted relatively easily into your existing page source by specifying classes etc.
When you nest an animation, for example, you're nesting a DIV under the covers. You can manually set z-indices, so the animation doesn't blow up the rest of your page. You can manually enter rgba colors into the color pickers etc.
The #1 target for Animator is mobile animations on iPhone/iPad/Android, so we only do CSS Animations, which are hardware accelerated on iOS and should be soon on Android. We could do a JavaScript polyfill like Hype, but JavaScript animations are frankly terrible on mobile because JavaScript timers are really crappy. (That said, we'll probably do a JavaScript polyfill at some stage if people really want them.)
Some other things about Animator - nested animations. Nesting is a really key tool to have - you can do some brilliant animations without a lot of work with nesting.
That said, it's great to have another entrant in the HTML5 animation category. Welcome to the party Tumultco!
Notably, ActionScript is not converted and only the latest WebKit browsers are supported. Hype's content displays almost everywhere (and you're seamlessly made aware in-app when there'll be differences between Hype's scene editor and any given browser), and Hype's Javascript support allows for much more interactive content than can be produced by a FLA processed via Wallaby.
We also expose innerHTML editing for elements, so you're free to compose whatever HTML you'd like within elements. (e.g. you can code up a form to include in your animation, even though we don't have "native" support for creating forms.)
Hype's content takes advantage of CSS3 when possible, making some animations and effects hardware accelerated. If those CSS3 features aren't supported by the browser then we fall back to Javascript based animations which aren't accelerated.
All the animations should be quite snappy though, regardless of how they're animated!
Frankly, anything other than Flash would make me happier.
Does Hype add anything substantial to that or is it mainly competing on price? Is there a trial version?
We developed Hype from the ground up to support the latest HTML5 features as well as some decent fallbacks and warnings for older browsers. It can be customized with JavaScript and interact with the rest of your page.
Hype was also built to be very easy to use; if you know how to use PowerPoint you can use Hype. It's "heritage" comes from how people make interactive content today, instead of the traditional animation space.
I can tell you from an insider's perspective who has worked with educational publishers for the last 8 years that they're all looking for a way to push interactive content to iOS devices that doesn't involve giving a 30% cut to Apple.
Tool for building flash like HTML5 web content.
Gotcha. What an advance.
// sarcasm