Show HN: CSS3 animation

http://www.thegoodman.cc/

by podrivo • 14 years ago

271 95 14 years ago

thegoodman.cc

19_ploT2• 14 years ago

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

podrivo13• 14 years ago

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

19_ploT2• 14 years ago

Ah ok! Anyways, amazing piece of work!

gnufied• 14 years ago

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?

cleverjake• 14 years ago

It is a welsh DJ living in Helsinki named Jonathan Hutchings.

asc76• 14 years ago

Wow. Impressive.

DoubleMalt2• 14 years ago

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.

podrivo13• 14 years ago

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

DoubleMalt2• 14 years ago

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)

ttflee• 14 years ago

It feels laggy on my old Mac Mini Early 2009 with Safari.

I doubt if canvas(, which is basically a JS wrapper for CoreGraphics in Safari) would be better in performance.

coofluence3• 14 years ago

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

MojoJolo2• 14 years ago

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• 14 years ago

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

pavlov5• 14 years ago

I've been making a HTML5 animation app called Radi: http://radiapp.com

It's a free download. (Mac only, at least for now -- there's a rudimentary Windows port that I'm hoping to finish one day.)

Unlike Edge, Hype and the rest of the animator apps, Radi uses the HTML5 Canvas element for rendering. The other apps basically do element-level animation using JavaScript + CSS3, whereas Radi renders frames from scratch. This allows advanced features like content keyframes, smoothly scaled brush strokes, etc.

Radi also supports HTML5 Video and Audio elements; you can create video effects and realtime Canvas script layers; and there's a minimalist Markdown editor included for text content.

coofluence3• 14 years ago

There are other attempts, but either they are limited in scope or ease of use: 1. This Exquisite Forest - https://chrome.google.com/webstore/detail/this-exquisite-for...

2. There was (is?) a Motorola Montage project that was available as a Chrome extension "Ninja". It seems to have disappeared. Here is a Git link: https://github.com/motorola-mobility/montage

3. Adobe Edge animate is there but it is a toy as of now.

lemcoe9• 14 years ago

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

Incredibly well-done.

camus4• 14 years ago

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

MojoJolo2• 14 years ago

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• 14 years ago

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

podrivo13• 14 years ago

what about audio synchronization?

tarabukka2• 14 years ago

>You should try it on Chrome

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

podrivo13• 14 years ago

why you keep calling Chrome the new Internet Explorer?

tarabukka2• 14 years ago

It's not about monopolistic practices, as another reply to my comment says. It's about developers using new, incompatible technologies and thinking that everyone is using a WebKit-powered browser.

At least I didn't get a "please upgrade to a modern browser" notice in Opera, like an unfortunately high number of Show HN posts have done...

gchucky• 14 years ago

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

rimantas• 14 years ago

You mean there are no really competing browsers, Chrome has ~90% market share and it's development stalled with the team being assigned to other projects?

neumann_alfred• 14 years ago

Ever noticed Chrome ads are about the web and websites, never about Chrome itself? In that sense, it's worse than IE. I mean, IE today.

paranoiacblack• 14 years ago

Yeahhhh, calling Chrome the new Internet Explorer is missing the forest for the trees. Recall Internet Explorer made it so that you would write regular markup and THEN have to write special markup and add extra rules for compatibility.

It's the other way around here. All regular markup renders fine on Chrome. However, they are working on future implementations of the standard, so many things you want to use might only work on Chrome or webkit browsers.

Also, Firefox has prefixes that only work on Firefox. You wouldn't call Firefox the new Internet Explorer, would you? Hopefully not, because that would be like calling Chrome the new Internet Explorer.

Yaggo2• 14 years ago

Sorry, but the situation is not even remotely comparable. Nowadays when a new CSS feature is introduced by a browser vendor (using a vendor prefix), it is designed to be standardised and implementable by anyone. Other vendors may contribute and there is discussion. If the feature gains popularity, it will eventually be implemented by big players and become a [first de facto, later de jury] standard.

The posted link is an example of experiment for measuring whether the new fancy stuff is good enough.

In the dark days of IE era, MS mainly exposed its internal Windows APIs (and security holes) to its browser. (Yeah, there was some truly good stuff too but that doesn't make MS less evil.)

Yaggo2• 14 years ago

Not to mention that webkit, the engine behind Chrome and Safari, is an open source project. (Forked from KHTML by Apple.)

gcmartinelli• 14 years ago

Amazing job.

RyanZAG2• 14 years ago

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.

tekmate• 14 years ago

I turned noscript off and it still locked up.

Hopka• 14 years ago

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

Flagged the submission because of that.

RyanZAG2• 14 years ago

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.

zalew• 14 years ago

works on my FF18 on Linux, but the animation center is on top of the window instead of the middle.

ElliotH• 14 years ago

Filed as Firefox Bug 825244 https://bugzilla.mozilla.org/show_bug.cgi?id=825244

progolferyo• 14 years ago

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

very cool.

podrivo13• 14 years ago

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

kitx• 14 years ago

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

podrivo13• 14 years ago

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

tambourine_man• 14 years ago

Parabéns Pedro, very nice indeed.

Maybe a blog post on how it was done?

podrivo13• 14 years ago

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

eriktrautman• 14 years ago

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.

podrivo13• 14 years ago

hmm, thanks. i'll have a look!

mosselman• 14 years ago

wicked

jpb0104• 14 years ago

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

geuis• 14 years ago

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

josephpmay• 14 years ago

Crashed my Chrome (iOS 6)

BaconJuice• 14 years ago

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

snprbob862• 14 years ago

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• 14 years ago

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

snprbob862• 14 years ago

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.

enra• 14 years ago

Web animations can be used for other purposes than just storytelling. They can be part of the interface, an app or an interactive tutorial.

valgaze• 14 years ago

Think about what one is able to do w/ TV graphics packages like this: http://www.chyron.com/

Jiggling the handle to get these things to work seems like it will be around for quite a while

rorrr• 14 years ago

That's not true. WebGL can get you to pretty much any level of animation you would need, it's just much harder to code for than CSS.

Groxx• 14 years ago

Well, in its defense, you can do things like this quite efficiently with WebGL or SVG. This is more of an abuse than a demonstration of the fastest-possible rendering in browsers. Similarly, my machine can't render a video into an ASCII stream into my resized-to-1-px-per-character terminal at full framerate; whether it can or cannot doesn't say anything about the state of playing videos on a computer.

If anything, demos like this serve more to demonstrate the capabilities of the system to people who may not be aware such things are even possible, not the best practices. This wasn't possible a few years ago in this way, period - now it is. Isn't that interesting and/or useful to know?

cnp3• 14 years ago

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

EwanG• 14 years ago

CreateJS in many ways seems to bring Flash/ActionScript concepts to JavaScript. I used EaselJS and PreloadJS in my Win 8 project, and in a lot of ways it felt like I was back in ActionScript (except for worrying about which page on the timeline - for better or worse).

cnp3• 14 years ago

Agreed. What impresses me most about the CreateJS suite is the ease in which you can use and interact with sprite-sheets. That's the one thing that I feel has been missing from most of the newer open-source drawing / animation libs coming out for HTML5, and really sent me back to the days when I was first learning how to animate in Flash and the joy of seeing it 'simply work' in the browser without much development time.

Easy to use, performant, JSON based, and thus interoperable with many pre-existing tools. I hope it catches on.

revelation• 14 years ago

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.

cnp3• 14 years ago

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.

madethemcry• 14 years ago

I totally agree with the flash analogy. All the bouncing balls and fancy pattern animations shown as "cutting edge css animations" have already been done with flash in 1999. History repeating? I use css3, js, canvas, sometimes mic and camera via js and other open technologies all day during my work but too often I get reminded of my time as a flasher- on a much harder way.

Anyway I love these days. Finally flasher and non-flasher are now in a single boat towards the future.

saint-loup• 14 years ago

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

podrivo13• 14 years ago

weird. it should at least load the main title... the 'action' really happens after pressing play.

com2kid• 14 years ago

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.

camus4• 14 years ago

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.

TommyDANGerous• 14 years ago

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

davmar• 14 years ago

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• 14 years ago

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

tanvirjalal• 14 years ago

This is a nice

charlieok• 14 years ago

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.

Show HN: CSS3 animation

Related Stories