3 ms·
Building an Animated HTML5 Rocket in 4 Days – A Kicksend Story
- nakedgremlin 14y agoHa! 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 14y agoForgive 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 14y agoThe 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 14y agoWhoops, the code samples were inserted into the wrong positions. Fixed now, thanks for letting us know!
- truth_dude 14y agoit 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 14y agoHonestly, 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.