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.
> 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.
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?
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:
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.
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.
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).
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.
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.
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...).
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.
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?
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.)
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.
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.
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.
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.
[+] [-] snprbob86|13 years ago|reply
[+] [-] kami8845|13 years ago|reply
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.
[+] [-] Groxx|13 years ago|reply
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?
[+] [-] valgaze|13 years ago|reply
Jiggling the handle to get these things to work seems like it will be around for quite a while
[+] [-] enra|13 years ago|reply
[+] [-] unknown|13 years ago|reply
[deleted]
[+] [-] rorrr|13 years ago|reply
[+] [-] cnp|13 years ago|reply
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|13 years ago|reply
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.
[+] [-] madethemcry|13 years ago|reply
Anyway I love these days. Finally flasher and non-flasher are now in a single boat towards the future.
[+] [-] EwanG|13 years ago|reply
[+] [-] coofluence|13 years ago|reply
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|13 years ago|reply
[+] [-] kitx|13 years ago|reply
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...).
[+] [-] podrivo|13 years ago|reply
[+] [-] RyanZAG|13 years ago|reply
[+] [-] ElliotH|13 years ago|reply
[+] [-] Hopka|13 years ago|reply
Flagged the submission because of that.
[+] [-] tekmate|13 years ago|reply
[+] [-] tarabukka|13 years ago|reply
And people ask me why I keep calling Chrome the new Internet Explorer.
[+] [-] rimantas|13 years ago|reply
[+] [-] podrivo|13 years ago|reply
[+] [-] Yaggo|13 years ago|reply
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.)
[+] [-] paranoiacblack|13 years ago|reply
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.
[+] [-] BaconJuice|13 years ago|reply
[+] [-] DoubleMalt|13 years ago|reply
But cool stuff indeed.
[+] [-] ttflee|13 years ago|reply
I doubt if canvas(, which is basically a JS wrapper for CoreGraphics in Safari) would be better in performance.
[+] [-] podrivo|13 years ago|reply
[+] [-] charlieok|13 years ago|reply
I didn't have that here, so I have no idea how long I should be prepared to sit and watch it.
[+] [-] davmar|13 years ago|reply
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|13 years ago|reply
[+] [-] MojoJolo|13 years ago|reply
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|13 years ago|reply
[+] [-] 19_ploT|13 years ago|reply
[+] [-] podrivo|13 years ago|reply
[+] [-] cleverjake|13 years ago|reply
[+] [-] jpb0104|13 years ago|reply
[+] [-] saint-loup|13 years ago|reply
[+] [-] com2kid|13 years ago|reply
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.
[+] [-] podrivo|13 years ago|reply
[+] [-] unknown|13 years ago|reply
[deleted]
[+] [-] TommyDANGerous|13 years ago|reply
[+] [-] lemcoe9|13 years ago|reply
Incredibly well-done.
[+] [-] camus|13 years ago|reply
[+] [-] geuis|13 years ago|reply
[+] [-] progolferyo|13 years ago|reply
very cool.
[+] [-] podrivo|13 years ago|reply