Show HN: CSS3 animation(thegoodman.cc)
thegoodman.cc
Show HN: CSS3 animation
http://www.thegoodman.cc/
30 comments
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.
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.
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.
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.
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.
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.
Running "very smooth for you" doesn't mean much. For one, it doesn't do much anyway -- some circles, some boxes, some bordes, shape tweening, and a soundtrack. You could do this stuff in 1080p in 10 year old hardware if you did it native. Heck, you could probably even do it in an Amiga 3000 circa 1992. I sure remember an O2 (I think it was called) by SGI doing far more impressive real time stuff in 1996. And that machine had about 1/5 the capabilities of my iPhone.
The thing is, it uses quite a lot CPU power for what it does (and no, it's not "technical issues" with individual systems: it tends to do so in general in every system), and the animation isn't always smooth and far from 60fps.
And the suggestion that he's "using a browser that doesn't properly support some of the required CSS3 features" only reinforces his point, that when it comes to web technology it's a large step backwards from what we can achieve in native systems.
The thing is, it uses quite a lot CPU power for what it does (and no, it's not "technical issues" with individual systems: it tends to do so in general in every system), and the animation isn't always smooth and far from 60fps.
And the suggestion that he's "using a browser that doesn't properly support some of the required CSS3 features" only reinforces his point, that when it comes to web technology it's a large step backwards from what we can achieve in native systems.
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?
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?
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
Jiggling the handle to get these things to work seems like it will be around for quite a while
Web animations can be used for other purposes than just storytelling. They can be part of the interface, an app or an interactive tutorial.
[deleted]
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.
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
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
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.
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 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.
These simple, linear CSS3 transitions just don't do it for me, having once experienced that. But again, it will get there in time.
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.
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).
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.
Easy to use, performant, JSON based, and thus interoperable with many pre-existing tools. I hope it catches on.
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 :-)
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 :-)
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.
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
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
You can still download Edge for free since it is still in pre-release. It's sort of a cross between Adobe Flash Professional and After Effects. It definitely has some promise in the web animation front. It's worth a try as it will likely become an industry-standard tool in the near future.
Why aren't web animations more popular due to these apps? Is there something wrong with Edge for example?
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.
these tools are still in development, as well as the technology they are developed to.
they are becoming popular. maybe in 2013! (:
they are becoming popular. maybe in 2013! (:
Real animation is expensive; and there are many trade-offs for working with such an unstable and cpu-dependent technology. Besides; video and Flash are still "good enough" for most use cases (children animated series, educational videos, etc).
Thanks for the list.
Do you know if any of these supports audio + frame synchronization, the audio being the primary "feature" of the animation?
Do you know if any of these supports audio + frame synchronization, the audio being the primary "feature" of the animation?
My Radi app supports audio in the latest release: http://radiapp.com
Most of these tools are nowhere near what flash can do. Inverse kinematics ? vector drawing ? filters ? advanced interactions ? perfect audio sync ? video integration ?...
Even at the risk of sounding like a broken record, I'd like to mention that my Radi animation app supports vector drawing, filters, audio sync, integrated video with effects, and has element and frame level scripting for advanced interactions :)
http://radiapp.com
Okay, after starting it for the 3rd time and not maximizing the app I could interact with the gui for a while. But then I clicked on Top-Level-Element Audio and couldn't click anything else anymore afterwards... By the way, trying to resize the window has the same effect like clicking fullscreen: The window area becomes mostly white with some grey rectangles in it. Only fix is to quit...
Sorry about that! I assure you it's not supposed to do that :)
Is your Retina MacBook Pro the 13" model? I wonder if there's an incompatibility with the Intel HD Graphics 4000 GPU. I don't have one for testing, but in the past I've seen quite a few issues related to how Intel's integrated GPUs diverge from the traditional NVIDIA/AMD chips.
Could you look in the Console to see if there's something printed when you run the app and things go wrong? This is getting off-topic for a HN thread, so if you have a moment to look into this, please drop me an email: pauli /at/ lacquer dot fi. Thanks!
Is your Retina MacBook Pro the 13" model? I wonder if there's an incompatibility with the Intel HD Graphics 4000 GPU. I don't have one for testing, but in the past I've seen quite a few issues related to how Intel's integrated GPUs diverge from the traditional NVIDIA/AMD chips.
Could you look in the Console to see if there's something printed when you run the app and things go wrong? This is getting off-topic for a HN thread, so if you have a moment to look into this, please drop me an email: pauli /at/ lacquer dot fi. Thanks!
Looks quite good, but seems buggy on my retina macbook. First time I started it I couldn't click anything. Second time I started it I tried maximizing, which turned the screen white, had to quite again. Now I'll try for a 3rd time... ;-)
looks great.
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.
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.
quick question: how are you able to let users render sharp lines on the canvas elem?
when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable.
here is some sample code: http://jsfiddle.net/NWBV4/10/
would you mind sharing how you overcame this issue?
thanks!
when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable.
here is some sample code: http://jsfiddle.net/NWBV4/10/
would you mind sharing how you overcame this issue?
thanks!
You probably need to offset the line coordinates by (0.5, 0.5).
This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example.
Hopefully that makes some sense (typed on a phone...)
This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example.
Hopefully that makes some sense (typed on a phone...)
Thanks Pavlov, I am trying out Radi.
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.
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.
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...).
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...).
I've separated the song in small scenes and animate them separately. There were storyboards too.
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.
Filed as Firefox Bug 825244 https://bugzilla.mozilla.org/show_bug.cgi?id=825244
I don't have NoScript and opening the page still made Firefox lock up.
Flagged the submission because of that.
Flagged the submission because of that.
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.
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.
Maybe an issue related to prefix free and firefox?
works on my FF18 on Linux, but the animation center is on top of the window instead of the middle.
I turned noscript off and it still locked up.
>You should try it on Chrome
And people ask me why I keep calling Chrome the new Internet Explorer.
And people ask me why I keep calling Chrome the new Internet Explorer.
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?
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.
why you keep calling Chrome the new Internet Explorer?
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."
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."
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.
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.
i get it. but this is an experiment. it only works in chrome, because chrome is the only one to render everything properly.
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...
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...
i 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. :/
at least for now. :/
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.)
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.)
Not to mention that webkit, the engine behind Chrome and Safari, is an open source project. (Forked from KHTML by Apple.)
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.
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.
I loved it, and I voted for you. Best of luck. You've inspired me.
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.
But cool stuff indeed.
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.
I doubt if canvas(, which is basically a JS wrapper for CoreGraphics in Safari) would be better in performance.
It's not ready for mobile... Audio gets unsynced and animations aren't smooth. :/
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)
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.
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.
great work :)
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 :)
Awesome. Was completely immersed in it. Hope Husky Rescue uses it as the video to their song.
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.
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.
This was good. Who is the vocalist? Sounds like Michael Caine to me.
I think it's Jonathan Hutchings, a Finnish DJ.
Got it from here: http://www.whiskyfun.com/Gigs/Husky-Rescue.html
It is a welsh DJ living in Helsinki named Jonathan Hutchings.
Kind of reminded me of this (not CSS): http://www.michalevy.com/giantsteps_download/index.html
It crashed immediately on my browser (Firefox 17 on Win7).
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.
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.
weird. it should at least load the main title...
the 'action' really happens after pressing play.
[deleted]
Very impressive to say the least. Great job, I'd like to be one day skilled as such in animation.
@podrivo, looks cool. The audio never syncs up on mobile Safari though
podrivo: did you do everything by hand or did you use some kind of IDE?
very cool.
very cool.
I wanted to study it, so it was all hand coded.
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.
hmm, thanks. i'll have a look!
Parabéns Pedro, very nice indeed.
Maybe a blog post on how it was done?
Maybe a blog post on how it was done?
there is a lot going on right now, but i intend to do that!
Obrigado! (:
[deleted]
Crashed my Chrome (iOS 6)
Wow. Impressive.
This is a nice
Amazing job.
wicked
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.