
Show HN: CSS3 animation - podrivo
http://www.thegoodman.cc/
======
snprbob86
Whenever I see these fancy "HTML5" multimedia demos, I get a little sad that
others are impressed by the fact that they were made with web technologies. I
know that, practically speaking, we're stuck with the current web tech for a
while, but they are, quite frankly, shit for the types of tasks that we demand
from them. After decades of studying & practicing computer animation in film
and games, we're barely scratching the surface on the web.

~~~
kami8845
> After decades of studying & practicing computer animation in film

That is distributed through video. There are closs-platform ways of
distributing video. I feel that does the job pretty good, and certainly better
than "shit".

If I go to the cinema and watch a Pixar movie, I'm quite content that they
pre-rendered the thing very expensively at Pixar and I'm watching something
that is limited in resolution, but much cheaper to distribute and reproduce: I
feel it's OK that the web manages to reproduce that same experience pretty
well.

~~~
snprbob86
Film is the high bar: The very best we can do with virtually infinite time and
resources.

You're totally ignoring the fact that we've got near film-quality, interactive
3D animations, running at 30 to 30 frames per second on 10 year old hardware
collecting dust in people's living rooms.

Meanwhile, this simple animation isn't quite getting the minimum 24 frames per
second when run full screened on my 30 inch monitor powered by a brand new
MacBook Pro.

~~~
bryans
Considering that it runs very smooth for me at 1080p using a first generation,
low-end quad core and ultra cheap onboard video, I can only assume that you
either have a technical issue with your system or you're using a browser that
doesn't properly support some of the required CSS3 features.

~~~
beering
It's not enough to say that it runs smoothly for most of the animation. It
should run smoothly for virtually every second of the animation. I have a
computer that beats yours hardware-wise running Chrome, and there were many
places in the animation where fps dropped below an acceptable threshold. Some
people are also more trained to notice fps drops too.

------
cnp
My first thought: Nice, well done, very clean, but compared to the stuff that
was being done in Flash in 2001, the bar has been lowered so substantially
it's as though Flash had never existed and no one has learned anything. The
Anti-Flash bias tears down memory quite easily.

But since we ARE dealing with a JavaScript and CSS3 world....

I'm really impressed with what's being done here and the possibilities that it
will bring forth:

<http://radiapp.com/> (this looks very promising)

<http://www.greensock.com/gsap-js/>

<http://www.greensock.com/css3/>

<http://www.greensock.com/js/speed.html>

The performance is so good! Check out the Mountain Dew site to see it in
action: <http://mountaindew.com/>

(You can tell the developers who worked on the site used to be Flash
Developers; it has that sort of polished flair.)

Also this: <http://www.createjs.com/#!/CreateJS>

And a bit of self promotion, built for the above:
<https://github.com/damassi/Backbone.Create>

~~~
revelation
Sarcasm? These sites perform terrible on even modern systems. Worst offenders
usually involve any kind of scrolling.

It's the anti-moore: while smart people at Intel shrink transistors, these
people build virtual machines on virtual machines to keep multiplying the
constants in Big O.

~~~
cnp
I agree that Flash not the way to go anymore. I'm just saying that there was
once an interactive "bar", and that bar has been obliterated and forgotten and
now we're playing catch-up. It's exiciting and interesting, all over again,
and there's something to be said about that. (But it's also fun to reminisce
about how badass flash once was (check out the <http://thefwa.com/> archives
going wayyyy back), and still is: skrillexquest.com)

These simple, linear CSS3 transitions just don't do it for me, having once
experienced _that_. But again, it will get there in time.

------
coofluence
This is a fine animation. Congratulations for syncing sound and getting a good
narration voice. I guess you used a JS library to achieve this. My
difficulties with CSS3/HTML5/JQuery animation as of "t.o.d.a.y" are:

1\. If one has to programmatically create all animations, then browser based
animation is at same stage as 1985'ish BYTE issues where drawing a chess grid
in CG was a major achievement. A lot of great animation work is done by
animators who don't code or won't code (<http://www.ninapaley.com>). Flash
provides timeline to achieve this. The newer Edge is nowhere close to that
level of fineness. Where are the tools for animators who animate to create
these animations? (Psst. We need another Flash!).

2\. Most of the current animation we see in CSS3/HTML5/Jquery is boxy,
geometric stuff. Where are animated characters? and how easy is it to do it
all in one environment like Flash? I am not a banner holder for Flash but it
did provide a good integrated environment to draw, animate and code too.

This is neither a rant nor any stand. I am just wishing that tools develop
faster and better so that animators who visually create animation can do cool
stuff in browser based animations.

Thanks for sharing a nice work of art :-)

~~~
MojoJolo
Your first difficulty is also my concern / question. Are there still no IDE
that can do those animations? I know that there will be in the future. But I
hope it will happen soon.

~~~
ryanac
Edge: <http://html.adobe.com/edge>

A5: <http://www.a5-animator.com>

Hippo: <http://hippostudios.co.uk>

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

Motion Composer: <http://www.aquafadas.com/en/motioncomposer>

Mac Only:

Purple: <http://www.purpleanimator.com>

Tumult Hype: <http://tumult.com/hype>

Online/Cloud Based Tools:

Mugeda: <https://www.mugeda.com>

Blysk: <http://bly.sk>

~~~
g2e
Why aren't web animations more popular due to these apps? Is there something
wrong with Edge for example?

~~~
bgilroy26
Unwillingness to appropriate the personnel money (i.e. either hiring people
with animating skills or giving a current staff member a raise and having them
take on the responsibility of learning to animate) could be a major
bottleneck.

------
kitx
Firstly, this is fantastic. Really beautiful work and you've reframed what I
thought was possible with CSS animations.

The CSS is remarkably economical and I notice that you aren't using any
javascript libraries other than jQuery.

Can you share how you keyframed and timed the animation work? Laying these out
by hand must be an exercise in tedium? In particular I'm talking about
scenes.css which is where the bulk of the animation happens
([https://github.com/podrivo/thegoodman/blob/master/files/scen...](https://github.com/podrivo/thegoodman/blob/master/files/scenes.css)).

~~~
podrivo
I've separated the song in small scenes and animate them separately. There
were storyboards too.

------
RyanZAG
Don't try to open this page with Noscript enabled in Firefox - it locks up the
browser. I'm guessing that without the javascript to control the CSS,
everything runs amok. Seems like you could make a browser DoS attack by simply
copying this page and stripping out the javascript? Might be worth a try...
for science.

~~~
Hopka
I don't have NoScript and opening the page still made Firefox lock up.

Flagged the submission because of that.

~~~
RyanZAG
Flagging the submission seems like the wrong approach - this is something
Firefox needs to fix quickly. I believe some websites let you insert your own
CSS in certain cases, and this could easily be abused...

There needs to be a limit on how much time can be spent trying to render CSS
or a popup box asking if you want to close it similar to how javascript
behaves.

~~~
podrivo
Maybe an issue related to prefix free and firefox?

------
tarabukka
_> You should try it on Chrome_

And people ask me why I keep calling Chrome the new Internet Explorer.

~~~
podrivo
why you keep calling Chrome the new Internet Explorer?

~~~
gchucky
Because developing sites that work only in Chrome is similar to how sites used
to be tailored to IE users. If we're all about interoperability and openness,
having something that only works for one subset of users isn't all that open.

<http://www.pcmag.com/article2/0,2817,2397158,00.asp> is a year old, but its
message is still true: "Sure, anyone can make a site that works in Chrome, so
it is open in that sense. But if that site only works in Chrome and not in
other major browsers, we have a lack of openness in the Web ecosystem."

~~~
FuzzyDunlop
Chrome isn't at fault for this, though. It's a combination of people wanted to
test out and play with the new stuff (a good thing), and not being thorough
enough to add all the extra vendor prefixes where possible (which is a waste
of time on some things if it won't work anyway).

I wrote a library to abstract the code needed to access the user's webcam
through the browser. I had to hold off an experimental launch for around 3
months before I could say it was widely supported, and not just by Chrome.

For experimental stuff, I don't think it's reasonable to hold back like that.
It's a great way to check the robustness of an implementation, or the
viability of an idea, before it becomes mainstream.

------
BaconJuice
I loved it, and I voted for you. Best of luck. You've inspired me.

------
DoubleMalt
Without the intention to lessen what you did ... it's pretty laggy on my
Galaxy Nexus in the default android browser.

But cool stuff indeed.

~~~
podrivo
It's not ready for mobile... Audio gets unsynced and animations aren't smooth.
:/

~~~
DoubleMalt
Well. Who's bug is it then ;) I'm happy to blame the mobile browsers if you
used standards (was not able to get a look at the code cause on the road)

------
charlieok
If I could make a suggestion for multimedia sequences like this, it would be
to include some kind of progress indicator. When watching a video, it's always
reassuring to be able to see how long the thing is, and how much of the way
through it I am.

I didn't have that here, so I have no idea how long I should be prepared to
sit and watch it.

------
davmar
fantastic work. i think what's really exciting is that it showcases to us what
can be done with css3 for everyday apps by making an ambitious film reel.

i can imagine many of the animations you made making their way into apps that
use css for navigation, subtly grabbing user attention, etc.

great work :)

------
RaSoJo
Awesome. Was completely immersed in it. Hope Husky Rescue uses it as the video
to their song.

------
MojoJolo
Amazing showcase of CSS3 animation and of course, talent!

I know, it's not meant for mobile, but I'm just curious what will happen and
tested it in my 4th gen iPod Touch. Too bad both Safari and Chrome in iOS6
crashed when I press the Start button.

~~~
dan_m2k
It's smooth on my iPad 1 / ios5 / Safari. And that's saying something, it
cries with trello and anything client heavy.

~~~
podrivo
what about audio synchronization?

~~~
g_lined
I'm not able to get the audio sync right on my ipad 3rd gen. The audio starts
about 15 seconds in.

------
19_ploT
This was good. Who is the vocalist? Sounds like Michael Caine to me.

~~~
podrivo
I think it's Jonathan Hutchings, a Finnish DJ. Got it from here:
<http://www.whiskyfun.com/Gigs/Husky-Rescue.html>

~~~
gnufied
On somewhat unrelated note. Thanks for using the music. I have always been
huge fan of Husky Rescue (and this particular track). Did you had to get their
permission?

------
jpb0104
Kind of reminded me of this (not CSS):
<http://www.michalevy.com/giantsteps_download/index.html>

------
saint-loup
It crashed immediately on my browser (Firefox 17 on Win7).

~~~
com2kid
And I as well. Well not quite crash... If I wait 30 or 40 seconds the browser
becomes responsive for a second or two.

Ah there! Finally caught it and was able to close the tab.

So basically it freezes up for an extended period of time.

Latest patched FF, Win8.

------
TommyDANGerous
Very impressive to say the least. Great job, I'd like to be one day skilled as
such in animation.

------
lemcoe9
Most animation designers couldn't do this well in flash or something similar!

Incredibly well-done.

~~~
camus
are you FN kidding ? did that kind of crap 10 years ago... with flash.

------
geuis
@podrivo, looks cool. The audio never syncs up on mobile Safari though

------
progolferyo
podrivo: did you do everything by hand or did you use some kind of IDE?

very cool.

~~~
podrivo
I wanted to study it, so it was all hand coded.

------
eriktrautman
fyi, the start button has a low enough contrast with the BG that it got lost
in my (admittedly poor) monitor and left me scratching my head for some time.

~~~
podrivo
hmm, thanks. i'll have a look!

------
tambourine_man
Parabéns Pedro, very nice indeed.

Maybe a blog post on how it was done?

~~~
podrivo
there is a lot going on right now, but i intend to do that! Obrigado! (:

------
josephpmay
Crashed my Chrome (iOS 6)

------
asc76
Wow. Impressive.

------
tanvirjalal
This is a nice

------
gcmartinelli
Amazing job.

------
mosselman
wicked

------
camus
again , no wow effect , been done already , and 10 years ago.The only
challenge is doing that with the crappy standard tech ,but nothing impressive
for a flash designer.

