
Skip Flash, Build Animations in HTML5 With Hype (YC W11) - ryannielsen
http://mashable.com/2011/05/20/hype/
======
bentruyman
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
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
I feel like Hype is targeted at advertisers but they're not ready to admit it.

~~~
Lazlo_Nibble
Is the name Hype not admission enough?

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

~~~
ryannielsen
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
At $30 I'd buy it just for an afternoon of fun. But I'm a Windows user -- any
plans for a Windows version?

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

~~~
old-gregg
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
> 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.

------
efields
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...](http://static.tumultco.com/hype/gallery/WooGrit/WooGrit_Resources/woogrit_hype_generated_script.js?76765)

… which references resources such as
[http://static.tumultco.com/hype/gallery/WooGrit/WooGrit_Reso...](http://static.tumultco.com/hype/gallery/WooGrit/WooGrit_Resources/3rdAnnual.png)

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.

~~~
ryannielsen
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
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!

------
cookiecaper
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_dude
_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.

~~~
cookiecaper
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?

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

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

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

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

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

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

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

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

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

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

------
melling
Can someone compare this to Sencha's product?

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

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

------
michaelpinto
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
<http://labs.adobe.com/technologies/wallaby/>

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

~~~
moock
[http://www.adobe.com/newsletters/edge/may2011/articles/artic...](http://www.adobe.com/newsletters/edge/may2011/articles/article7/)

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

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

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

~~~
ryannielsen
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!

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

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

------
iaskwhy
What's the browsers support for this?

~~~
ryannielsen
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>

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

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

------
dylanrw
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!

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

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

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

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

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

Tool for building flash like HTML5 web content.

------
Meai
Why are you only releasing for the mac app store?

~~~
ryannielsen
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!

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

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

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

------
ritcho
Anybody tested with a wordpress setup?

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

------
wcchandler
Does anybody have a crack for this?

// sarcasm

