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

http://blog.kicksend.com/building-a-rocket-in-4-days-a-kicksend-story/

by skyfallsin • 14 years ago

30 6 14 years ago

blog.kicksend.com

nakedgremlin• 14 years ago

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.

kmm• 14 years ago

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?

kylebrown• 14 years ago

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• 14 years ago

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

truth_dude• 14 years ago

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

caffeineninja• 14 years ago

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.

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

Related Stories