Hey dude. Awesome demo. Wanted to be a counter-voice to all the commenters here complaining about having to resize the window to make this work. You've got lots of upvotes so clearly people like your work. The only people commenting are the pessimists.
The resize thing is a cool hack. I wonder if anyone has ever made a game with window resizing as the control mechanism.
Finally, if you do you want to get rid of the resizing, maybe an easy way would be to simulate it by covering the un-animated part of the window with a curtain (Mario style: http://www.flickr.com/photos/shieldsokc/5388817583/).
Thanks :) Think it's easy for some to forget it's a tech demo, so it isn't meant to be absolutely 'perfect', but really happy with the feedback so far.
Good idea re the curtain - it would be quite an easy port to make the animation work like that, so think I might do that at some point.
Think there are lots of possibilities around window resizing that haven't been explored yet - could make some really interesting effects...
Pretty cool idea, though having to constantly resize the window got annoying, and I think it lost track of the window size after while because Mario started collecting coins without touching them, then ran off the screen as he did a flying jump, after which the demo froze (on Chrome).
Decent point on not knowing how big your window size is - think I'll update to include a width counter on the start screen.
Reason for the resizing down at the start is simply so only certain parts of the animation show at different times. It means I can control what width the animation is being viewed at, as otherwise I'd have to animate everything across a very large width potentially, which would be pretty time consuming, as this could be huge. Think with the feedback I've had, will release as a non media query animation as well when I get chance.
It took me a while to realize that the resizing was the whole point -- the scene animates as it gets wider.
There's nothing ground-breaking here, but neither is there in many of the XKCD stunts that we fawn over here. I think if you just describe it that way we'd all know what's going on.
I explored a few options - the reason I decided to make it controlled by the user was so it didn't have to open in a new window (as you can only control the width of the window with JS in a separate window).
Thanks for the feedback though - might create a separate self-running version at some point.
This only works when resizing the window? Would an ever-increasing div work? If you floated it right the size would always increase on the left, mimicking the drag and resize action that the user is doing.
That said, I get that you're pushing the limits as it is here and you've likely already considered this as an option.
I'm using a tiling-WM and the resizing window thing was a bit annoying to me, and was somewhat distracting from the demo. But other than that, I'm impressed and I had lots of fun playing with the css to see how it was built!
"I built an army of Arduino robots attached to the base of all of the major objects in my garage that can read any website and assign themselves DOM elements that most match their physical attributes, rearranging the whole space to parallel that site's hierarchy and stylesheets. (Did I mention they coordinate with each other over a custom NFC protocol I developed?)"
[I guess I went so ridiculous it actually sounds cool.]
Okay. I give. You've managed to flip my cynicism and imagine this into an article I would up-vote. If someone decides to do this though, they should at least use @jasonkolb's garage! Last thing the poor guy needs is that waved in his face.
Not a dumb question - only reason was because I wanted an excuse to play around with css animations and see how powerful they are in their current state.
SVG would probably be much more robust as a solution (as would canvas have been) - I think the demo shows more than anything that CSS3 animations need slightly more reliable support across modern browsers before they are a viable choice for doing some really nice things with them.
I might be able to answer this. Animating SVG is tricky, groups is a particularly issues because each element inside a group has to be animated as opposed to just animating the parent group tag (which causes a lot of issues with rotations in particular, you have to break out the trigonometry in javascript).
I disagree, <g> element can be animated with JavaScript as easily as e.g. <div>. You just change the value of transform attribute. Rotations can be handled easily once you understand how matrixes work.
I'm sure this took a lot of work to do, but it's too buggy, I don't understand why I have to increase the window size, that seems to cause the animations stop of become sluggish. Overall it's not a good demo even though the possibilities of this are nice.
Thanks for the feedback - reason it's a bit buggy is mainly down to the implementation of the animation step-timing.
In Firefox, it works as you would expect, stepping through the spriting. In webkit, it's very inconsistent in how it renders, and doesn't look as polished because of this.
I've noticed the speed of the animation being effected by the resizing - like mentioned to others, will probably release a version which just shows the animations off separate to the window resizing as well to avoid this. The main reason for including reliance on media queries was to fit it into the mozilla dev derby criteria for this month.
Really nice, but I'm not entirely sure I see the point of controlling the animation through media queries. For me it takes away from the real performance, which is animating the whole thing through CSS in the first place.
Strangely enough, the demo works using Webkit (Chrome) but not with Firefox : I cannot start the animation, as the Start button does not appear even if I resize the window properly.
It seems the minimum reported by window.innerWidth on 16.0.2 (OS X, 10.8.2) is 453. Once it hits that, I can drag it all the smaller I like, and it is stuck at 453.
Not sure why everyone is complaining about the resizing thing. I thought that was the whole point of the demo, to show that you can control an animation with the window size.
The resize thing is a cool hack. I wonder if anyone has ever made a game with window resizing as the control mechanism.
Finally, if you do you want to get rid of the resizing, maybe an easy way would be to simulate it by covering the un-animated part of the window with a curtain (Mario style: http://www.flickr.com/photos/shieldsokc/5388817583/).