Hacker News new | comments | ask | show | jobs | submit login
Skip Flash, Build Animations in HTML5 With Hype (YC W11) (mashable.com)
209 points by ryannielsen on May 20, 2011 | hide | past | web | favorite | 68 comments

I apologize for the following rant:

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.

I'm with you on #4 without reservation.

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.

I feel like Hype is targeted at advertisers but they're not ready to admit it.

Is the name Hype not admission enough?

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

Indeed. They have a very David Siegel Creating Killer Websites feel to them.

What I would like to be able to do with this tool is decorate a conventional HTML site with little animations. I want to add polish without breaking the RESTfulness of the site. Flash can't really do that. If this tool can, that could give it a real edge.

They have an icon designed by Susan Kare. Nice touch!

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 :)

[1] http://news.ycombinator.com/item?id=2040844

Thanks for the well wishes, pavlov! As is often said, shipping a 1.0 will kill you. [1] Being a two person team makes a colossal difference, both for productivity and motivation. At the very least, there's almost always one person who's pushing to stop adding features and finally ship. ;-)

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

At $30 I'd buy it just for an afternoon of fun. But I'm a Windows user -- any plans for a Windows version?

Hopefully this doesn't come off as too harsh, but would anyone mind telling me why Hype is better than Flash? Judging from their gallery, it's just as bad. It only "fixes" the CPU hogging part of Flash (and, presumably, Flash's lack of mobile support).

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.

Flash has a number of issues in addition to the fatal ones you've mentioned. I can offer a few more:

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.

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

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.

"...would anyone mind telling me why Hype is better than Flash?... It only "fixes" the CPU hogging part of Flash (and, presumably, Flash's lack of mobile support)."

Seems like you answered your own question. Those are two major problems with Flash.

Where's the evidence that heavy animations in javascript are less CPU hogging than heavy animations in Flash?

It's built with open standards.

Web dev/designer here.

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:


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

When you say "integrating animated objects created with Hype looks nearly impossible", what's your intention? Embedding Hype documents in existing web pages takes three lines of HTML (and uploading the resources folder, of course), so it's almost as simple as using the <embed> tag.

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 think efields' criticism centers around the fact that Hype packages the animations in addition to simplifying their creation.

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!

Woah, that's like 300kb of javascript...

Awesome. This is just what's needed to take the crown from Flash. Flash is really a designer's tool, and if you don't have a designer-friendly IDE you're never going to replace it. I'm pleased to see someone progressing on this front, though of course we'd much prefer to see an open-source IDE.

Awesome. This is just what's needed to take the crown from Flash

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.

Please expand. I'm aware there are some things that HTML 5 does not offer a reasonable replacement for, but a tool like this could easily eliminate many of the trivial uses of Flash for banners, ads, menus, etc., and there is no hope of eliminating Flash without a designer-friendly IDE, imo. I did not mean Flash would become totally undone or useless because of this application, as this application does not address some of the problems with HTML 5 like audio generation, encrypted streaming, etc. Why do you disagree?

Isn't $30 VERY low for this kind of app? Can any of the founders comment how they arrived at this pricing?

We're glad you see a lot of value in our app! The $30 price is for a limited time, so Hype will cost more eventually.

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.

It says it's an introductory price. It's low enough that a lot of people & companies won't care if they don't go on to use it, especially compared to pricing like the Flash IDE.

One of the major advantages of Flash is in its compatibility with Illustrator/Photoshop. I can literally create a vector sketch in Illustrator, copy paste it over to Flash and keyframe myself an animation. Shape tweening and Illustrator == epic win.

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.

This thing is so damn useful for creating iOS mockups which can be rendered anywhere. Killer use case, IMO.

This confused me at first because of the kickass Hype Framework built FOR Flash from Joshua Davis http://www.hypeframework.org/

I too was confused by their use of the name Hype and the awesome open source Hype Framework. Apparently there's no connection.

You are correct: there's no connection between Hype.app and the HYPE framework.

Were you aware of the name clash before you committed to your current name?

If it is going to be an annoying animation that is getting in the way of getting things done, I will skip it or the site, no matter what it is built in.

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.

I think this will really open up how people use CSS3 animations on their sites. It's important that this isn't used as a crutch, though. Minor animations should still be coded by hand so the designer/developer is aware of how everything works. Cool stuff, though. Curious as to how this will match up against something like Animatable (http://www.animatable.com)

I think someone should just build a tool in html/css. Seems appropriate to me.

Probably an open source project so other webdevelopers can help, I would expect that it would improve fast.

Can someone compare this to Sencha's product?


Sencha's Animator is an interesting product! Some key differences between Animator and Hype:

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

I haven't spent much time with hype, but they have some nice features like the record my action (neat). They also hide a lot of the details of what's going on under the covers with their JavaScript library.

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!

Adobe should have gotten their act together instead of whining about the iPad. Flash has become so un-friendly that I can see a product like this really hurting Adobe.

Wallaby is rather limited, according to Adobe's own site: http://labs.adobe.com/wiki/index.php/Wallaby#Release_Notes

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.

Does this application allows full customization as well, integration with 3rd party api's? Is the code available once you download the app?

Because Hype outputs standard Javascript, you have all the flexibility offered by the language. Custom Javascript functions can be run in response to user actions (e.g. mouse down, on key press). Because it's standard Javascript, you're free to use any libraries other js resources made available on the page which embeds your Hype animations.

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

What do you mean? What api's? What customization? Are you asking about the source of the app?

Seems like a good start, but their animations seem really sluggish on my Macbook. Could just be me though!

Was there any animations in particular that appeared to be slow? What browser are you using, and on what model Macbook?

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!

I think it has to be because my Macbook is old as dirt. It's 5 years old, and runs okay, but not great. I'll give it another run-through with my iMac at home.

Frankly, anything other than Flash would make me happier.

I might be able to use Hype for a client project to replace a Flash animation. But I need to know what versions of Internet Explorer that Hype animations will work with (most likely using explorercanvas). I couldn't find browser compatibility information on the website.

What's the browsers support for this?

Hype makes an effort to support everything back to IE6. Of course, there are some effects that simply can't reasonably be replicated on older browsers. Hype lets you choose which browsers to support and, when you do something which will cause compatibility problems, you're warned inline in Hype's inspector. You can get a quick demo by watching our Exporting video: http://tumultco.com/hype/features/#exporting

Congrats on your release! Glad to see a growing market for modern web standards animation tools. I'm building my own CSS Animation tool as well, so the more the merrier. I'll have to check out your approach and get down to work on my next build.

As someone coming from the visual arts side, I have to say that Adobe Flash is an amazingly great tool, and CS5 can already export to HTML5.

Does Hype add anything substantial to that or is it mainly competing on price? Is there a trial version?

The HTML5 export ability in CS5 is rather limited now (can't do ActionScript nor many other features), and we think there will always be a mismatch in capabilities.

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.

It's a fun app to use and kinda neat the tricks you can learn from it. One issue I have is that the markup/css is not the cleanest in the world but it definitely gets the job done. Go Hype!

Any plans to integrate audio playback tools? This is so very close to what we need for authoring interactive ebooks in the education sector, but audio is critical.

I'm building a different animation tool will eventually support audio/video sync - I've done lots of interactive e-learning production, and my tool, Edit Room (link in profile) is being built as a more general-purpose web motion graphics tool, with training as one possible market that I'd like to serve. It's not there yet, but the live prototype lets you quickly sequence text and boxes directly in the browser. Check it out and drop your email so you can be notified when that feature gets added...

We don't yet have any plans that we're ready to speak about publicly, but we are thinking of ways to support audio within Hype. WebKit and Mozilla are also working on some killer audio enhancements that might end up in future standards and browser releases, so we're keeping an eye on those, too.

Thanks, Ryan. You guys are doing a kickass job of keeping an eye on this thread for questions. I've sent links to your product and this thread to everyone I know in the educational publishing industry.

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.

We're always happy to help, and we absolutely appreciate your referrals! If anyone wishes to chat in-depth, I can be reached at ryan@tumultco.com.

Try our product DivCraft - http://www.divcraft.com - built by the MockFlow team

Tool for building flash like HTML5 web content.

Why are you only releasing for the mac app store?

The Mac App Store is an excellent distribution channel that, even with its drawbacks, still removes a ton of friction for us as well as our customers. We'll certainly consider other distribution channels (especially for site licenses or bulk purchases), but the App Store has been good to us so far!

Sorry, I meant: Why did you decide to go for Mac OS only? I imagine that you could gain a userbase from Linux users who can't natively use the Adobe Suite. It's all web technologies after all, I imagine you could code the frame in Qt.

Ah, gotcha. We're both well versed in Mac development and are very productive in Objective-C/Cocoa, which is why we chose that platform. The App Store was also a factor, as is the popularity of Macs with designers and web developers.

So this is another way to create animated banners... only banners that take more power and performance to be displayed, plus still locked to their platform.

Gotcha. What an advance.

Anybody tested with a wordpress setup?

im cuckoo for cocoa canvas! there its been said at least once.

Does anybody have a crack for this?

// sarcasm

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact