Skip Flash, Build Animations in HTML5 With Hype (YC W11)

http://mashable.com/2011/05/20/hype/

by ryannielsen • 15 years ago

209 68 15 years ago

rglover• 15 years ago

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)

Lennie• 15 years ago

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.

suyash• 15 years ago

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

macrael• 15 years ago

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

ryannielsen13• 15 years ago

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

joelhooks• 15 years ago

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

Relwal• 15 years ago

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

ryannielsen13• 15 years ago

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

JonLim2• 15 years ago

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

ryannielsen13• 15 years ago

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!

JonLim2• 15 years ago

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.

melling2• 15 years ago

Can someone compare this to Sencha's product?

http://www.sencha.com/products/animator/

ryannielsen13• 15 years ago

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]

mmullany• 15 years ago

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!

xiaoma• 15 years ago

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?

tumultco• 15 years ago

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.

wcchandler• 15 years ago

Does anybody have a crack for this?

// sarcasm

pavlov• 15 years ago

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

ryannielsen13• 15 years ago

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

kenjackson• 15 years ago

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

michaelpinto• 15 years ago

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.

windsurfer• 15 years ago

http://labs.adobe.com/technologies/wallaby/

ryannielsen13• 15 years ago

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.

Meai2• 15 years ago

Why are you only releasing for the mac app store?

ryannielsen13• 15 years ago

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!

Meai2• 15 years ago

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.

cookiecaper2• 15 years ago

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.

whatever_dude2• 15 years ago

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.

cookiecaper2• 15 years ago

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?

efields• 15 years ago

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:

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.

ryannielsen13• 15 years ago

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.

snsr• 15 years ago

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!

AshleysBrain• 15 years ago

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

splatcollision2• 15 years ago

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.

grumpyoungnerd• 15 years ago

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

bradleyland2• 15 years ago

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.

splatcollision2• 15 years ago

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

ryannielsen13• 15 years ago

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.

bradleyland2• 15 years ago

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.

paraschopra• 15 years ago

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

ryannielsen13• 15 years ago

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.

benologist• 15 years ago

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.

bentruyman• 15 years ago

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.

mortenjorck• 15 years ago

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.

seanalltogether• 15 years ago

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

jamesbritt• 15 years ago

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.

extension• 15 years ago

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.

iaskwhy• 15 years ago

What's the browsers support for this?

ryannielsen13• 15 years ago

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

dylanrw• 15 years ago

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!

whatever_dude2• 15 years ago

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.

nborgo• 15 years ago

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.

melling2• 15 years ago

It's built with open standards.

jdq• 15 years ago

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

andybak2• 15 years ago

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

old-gregg• 15 years ago

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.

hacketyhack• 15 years ago

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

tfincannon• 15 years ago

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.

krishna2• 15 years ago

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.

ritcho• 15 years ago

Anybody tested with a wordpress setup?

mannicken• 15 years ago

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.

divcraft• 15 years ago

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

Tool for building flash like HTML5 web content.

JofArnold• 15 years ago

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

Skip Flash, Build Animations in HTML5 With Hype (YC W11)

Related Stories