6 ms·
Show HN: CSS3 animation
- 19_ploT 14y agoThis was good. Who is the vocalist? Sounds like Michael Caine to me.
- podrivo 14y agoI think it's Jonathan Hutchings, a Finnish DJ. Got it from here: http://www.whiskyfun.com/Gigs/Husky-Rescue.html http://www.whiskyfun.com/Gigs/Husky-Rescue.html
- cleverjake 14y agoIt is a welsh DJ living in Helsinki named Jonathan Hutchings.
- asc76 14y agoWow. Impressive.
- deleted 14y ago[deleted]
- DoubleMalt 14y agoWithout 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 14y agoIt's not ready for mobile... Audio gets unsynced and animations aren't smooth. :/
- DoubleMalt 14y agoWell. 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 14y agoIt 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.
- coofluence 14y agoThis 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 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 14y agoYour 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 14y agoEdge: http://html.adobe.com/edge http://html.adobe.com/edge A5: http://www.a5-animator.com http://www.a5-animator.com Hippo: http://hippostudios.co.uk http://hippostudios.co.uk Sencha Animator: http://www.sencha.com/products/animator http://www.sencha.com/products/animator Motion Composer: http://www.aquafadas.com/en/motioncomposer http://www.aquafadas.com/en/motioncomposer Mac Only: Purple: http://www.purpleanimator.com http://www.purpleanimator.com Tumult Hype: http://tumult.com/hype http://tumult.com/hype Online/Cloud Based Tools: Mugeda: https://www.mugeda.com https://www.mugeda.com Blysk: http://bly.sk http://bly.sk
- 14y ago
- lemcoe9 14y agoMost animation designers couldn't do this well in flash or something similar! Incredibly well-done.
- camus 14y agoare you FN kidding ? did that kind of crap 10 years ago... with flash.
- deleted 14y ago[deleted]
- MojoJolo 14y agoAmazing 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.
- tarabukka 14y ago>You should try it on Chrome And people ask me why I keep calling Chrome the new Internet Explorer.
- podrivo 14y agowhy you keep calling Chrome the new Internet Explorer?
- tarabukka 14y agoIt'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...
- podrivo 14y agoi agreed. but this is an exception. its a experiment... as much as I want, this site will not work in opera. at least for now. :/
- gchucky 14y agoBecause 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 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."
- podrivo 14y agoi get it. but this is an experiment. it only works in chrome, because chrome is the only one to render everything properly.
- gcmartinelli 14y agoAmazing job.
- RyanZAG 14y agoDon'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 14y agoI turned noscript off and it still locked up.
- Hopka 14y agoI don't have NoScript and opening the page still made Firefox lock up. Flagged the submission because of that.
- RyanZAG 14y agoFlagging 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 14y agoMaybe an issue related to prefix free and firefox?
- zalew 14y agoworks on my FF18 on Linux, but the animation center is on top of the window instead of the middle.
- ElliotH 14y agoFiled as Firefox Bug 825244 https://bugzilla.mozilla.org/show_bug.cgi?id=825244 https://bugzilla.mozilla.org/show_bug.cgi?id=825244
- progolferyo 14y agopodrivo: did you do everything by hand or did you use some kind of IDE? very cool.
- podrivo 14y agoI wanted to study it, so it was all hand coded.
- deleted 14y ago[deleted]
- kitx 14y agoFirstly, 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/scenes.css https://github.com/podrivo/thegoodman/blob/master/files/scen...).
- podrivo 14y agoI've separated the song in small scenes and animate them separately. There were storyboards too.
- tambourine_man 14y agoParabéns Pedro, very nice indeed. Maybe a blog post on how it was done?
- podrivo 14y agothere is a lot going on right now, but i intend to do that! Obrigado! (:
- eriktrautman 14y agofyi, 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 14y agohmm, thanks. i'll have a look!
- mosselman 14y agowicked
- jpb0104 14y agoKind of reminded me of this (not CSS): http://www.michalevy.com/giantsteps_download/index.html http://www.michalevy.com/giantsteps_download/index.html
- geuis 14y ago@podrivo, looks cool. The audio never syncs up on mobile Safari though
- josephpmay 14y agoCrashed my Chrome (iOS 6)
- timrpeterson 14y agoreally impressive
- BaconJuice 14y agoI loved it, and I voted for you. Best of luck. You've inspired me.
- snprbob86 14y agoWhenever 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.
- deleted 14y ago[deleted]
- kami8845 14y 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.
- snprbob86 14y agoFilm 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 14y agoConsidering 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.
- cnp 14y agoMy 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/ http://radiapp.com/ (this looks very promising) http://www.greensock.com/gsap-js/ http://www.greensock.com/gsap-js/ http://www.greensock.com/css3/ http://www.greensock.com/css3/ http://www.greensock.com/js/speed.html 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/ 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 http://www.createjs.com/#!/CreateJS And a bit of self promotion, built for the above: https://github.com/damassi/Backbone.Create https://github.com/damassi/Backbone.Create
- EwanG 14y agoCreateJS 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).
- cnp 14y agoAgreed. 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 14y agoSarcasm? 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.
- saint-loup 14y agoIt crashed immediately on my browser (Firefox 17 on Win7).
- podrivo 14y agoweird. it should at least load the main title... the 'action' really happens after pressing play.
- com2kid 14y agoAnd 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.
- camus 14y agoagain , 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 14y agoVery impressive to say the least. Great job, I'd like to be one day skilled as such in animation.
- davmar 14y agofantastic 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 14y agoAwesome. Was completely immersed in it. Hope Husky Rescue uses it as the video to their song.
- tanvirjalal 14y agoThis is a nice
- charlieok 14y agoIf 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.