

Building an Animated HTML5 Rocket in 4 Days – A Kicksend Story - skyfallsin
http://blog.kicksend.com/building-a-rocket-in-4-days-a-kicksend-story/

======
kylebrown
The relative placement of the code excerpts is confusing. The coffeescript is
canvas code for drawing the gauge needle, a progress bar for the image upload
and therefore not timed with the rocket, if I understand correctly.

The SASS example is a css3 animation for the rocket ship. But it highlights
something about css3 transitions I find really frustrating: you can't specify
arcs (you can use bezier curves to specify a timing function, but not a
positioning function). Animating an arc requires using translation and
rotation in combination, which is very kludgy.

~~~
skyfallsin
Whoops, the code samples were inserted into the wrong positions. Fixed now,
thanks for letting us know!

------
truth_dude
it took 4 days to build an animated html5 rocket? you guys document the most
ridiculous things. I still do not understand what kicksssssnd is for

get over yourselves

thanks, truth_dude

------
kmm
Forgive my ignorance, but what is the canvas still for? The given CoffeeScript
code draws a small arc. But is this necessary if they're doing the final
animation with CSS3?

------
caffeineninja
Honestly, I signed up for Kicksend to see this and I saw a one second long,
underwhelming animation, that wasn't even very rewarding for my effort.

I totally expected the camera to "follow" the rocket and all I saw was a
sloppy rocket sprite jump off the screen.

You guys have the right idea with this, but poor execution.

------
nakedgremlin
Ha! You need to sign up for the service to see the final animation. Bravo!
Bravo Kicksend! Braaaavo!

You got a sign up coming your way.

