Show HN: CSS3 animation
thegoodman.cc
thegoodman.cc
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.
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.
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.
Jiggling the handle to get these things to work seems like it will be around for quite a while
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?
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
Easy to use, performant, JSON based, and thus interoperable with many pre-existing tools. I hope it catches on.
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.
These simple, linear CSS3 transitions just don't do it for me, having once experienced that. But again, it will get there in time.
Anyway I love these days. Finally flasher and non-flasher are now in a single boat towards the future.
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 :-)
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
Do you know if any of these supports audio + frame synchronization, the audio being the primary "feature" of the animation?
they are becoming popular. maybe in 2013! (:
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!
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.
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!
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...)
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.
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...).
Flagged the submission because of that.
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.
And people ask me why I keep calling Chrome the new Internet Explorer.
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 for now. :/
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."
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.
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.
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.)
But cool stuff indeed.
I doubt if canvas(, which is basically a JS wrapper for CoreGraphics in Safari) would be better in performance.
I didn't have that here, so I have no idea how long I should be prepared to sit and watch it.
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 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.
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.
Incredibly well-done.
very cool.
Maybe a blog post on how it was done?