from Hacker News

Building an Animated HTML5 Rocket in 4 Days – A Kicksend Story

by skyfallsin on 6/28/12, 11:11 PM with 6 comments

• by kylebrown on 6/29/12, 1:08 AM

  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.

• by truth_dude on 6/29/12, 4:45 AM

  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

• by kmm on 6/29/12, 12:52 AM

  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?

• by caffeineninja on 6/29/12, 5:41 PM

  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.

• by nakedgremlin on 6/29/12, 12:36 AM

  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.