Update: 10/11/2011 New Animation; Making Internet Marketing Fun with Wufoo and CSS3
Dont have CSS3 animation capable browsers? Watch a video of the animation.
Inspiration
Searching YouTube for inspiration I stumbled on to the intro of the classic 1967 spider-man cartoon series. While watching I realized that the animation was very basic. It was the paper doll sort of animation that lends itself perfectly to css3. Hmmm… “I could something like that with a little css3″, I thought.
Character & background art
CSS3-MAN
The character art was created in adobe illustrator and copy/pasted into photoshop for export. When designing a character for animation. Carefully plan all the pieces that will compose your character. I decided on simple shapes and built each part of the body separately, like a marionette. This allowed me to re-use some graphics. By building the character like a marionette. I was able to simplify the animation process.
As previously stated, the graphics originated in illustrator. Vectors paths and points make it simple to adjust the artwork. For instance, If you need spidey looking up or down. Simply adjust the position of the eyes and webbing on the head shape to complete the illusion. You can clean up any extra lines by simply moving the point or deleting it.
Same applies for the torso, legs and arms. By adjusting the orientation of the chest design and belt we can fake the rotation of a 2d element. Moving the arms and/or legs a little behind and a little in front of the torso creates the illusion of a subtle 3rd dimension.
BACKGROUND
The cityscape’s were also created in illustrator. But they started as plain screen-grabs. I captured certain parts of the video as it played. Then pasted them into illustrator. I created another layer above the screen-grab. Drawing paths over the screen-grabs images. Using it like tracing paper. When graphics were done, I trashed the screen-grab layer.
Just like the character. When creating these cityscape graphics you must think a little in advance about how the pieces must fit together. Background images used for scrolling and zooming should be 2 or 3 times wider and/or taller to allow for panning left, right, up, or down. The same applies for zooming in and out. Now we have our finished character and background graphics. We can begin setting up our graphics for animation.
Complex CSS3 character animation and rigging
CHARACTER RIGGING
One of the trickiest parts to creating these css3 character animations is the rigging of joints or skeleton so that they hinge and rotate believably. The most important property is the transform-origin property. The transform-origin property uses x,y coordinates to determine the point from which animation or transformations occur. (If you want a full explanation of css3 animation properties please read my last article.) In order to determine the accurate transform-origin point for our arm and leg graphics we’re going to use a simple trick.
Notice how the foot graphic (1) is much wider than the thigh graphic (2). It would be impossible to match up the transform-origin point on these two pieces.
However, If we match the width of the thigh (2) with the width of the foot (1)… That’s it! By increasing the width of the canvas area of the thigh to match the width of the foot we can accurately match the rotation points of these “hinges” using the css3 transform-origin property. By giving the thigh image a wider canvas area we can move the thigh graphic left or right to line it up with the foot graphic.
We can now ascertain that these two pieces will have the exact rotation points via css3 transform origin. By setting the transform-origin for foot to (x) number of pixels from the left we can guarantee that the foot will rotate from exactly where the bottom of the shin is located.
Now we can apply the same transform origin coordinates to the top of the leg div (which wraps around thigh & foot). By rotating the leg div we rotate its children too. This means that the leg div rotates both the thigh and foot graphics at the same time. Mimicking the functionality of a skeleton. Which allows us to have the foot moving along its own rotation path while also rotating along the path of the whole leg. Its important to nest items because this allows you to have multiple animation paths without having to recalculate their position constantly. If I rotate the thigh and foot without first wrapping them in a leg div how would I also make the foot rotate upon the axis of the leg? It would be near to impossible. And it would look horrible. By nesting and breaking down the animations into their major body parts and just animating one major body part at a time and utilizing the animation of children I can achieve complex (for css) animation combinations. Creating the illusion of the character zooming in required that the images be created at a bigger size. Then implementing them into the html mark-up at a smaller size. There are two ways to do this. Using the scale transform property or using the image width property. By increasing the image width over a key-framed animation you give it the illusion of growing or zooming into the screen. We can make a 500 pixel wide image then insert it into the html at 5% of its size. We are then able to make it smaller or bigger by increasing the height or width via css3.
Complex Character Animation
When building a character composed of precisely placed elements. Being able to visually construct the character is essential. When we first place all the different pieces for our character into the html. They are all jumbled up together. Firefox 3.x has implemented css3 moz-transform-origin and moz-rotate. Which means I can use firebug developer tool to visually position the character’s body parts where they belong. This makes setting up the start and end positions/rotations for the characters pose simple. To begin, we set up the characters body parts in the start position. I just adjust the values to where I need them in order to get the proper first position. I visually adjust the rotation and position values of the graphic using firebug.
This allows me to gain pixel perfect precision over where I want the graphic placed. Using firebug like this takes the guesswork out of animating something as technical as different body parts. I just visually adjust the values to where I need them to get the proper first position. We then place those coordinates into the css. Now we have to figure out the end positions for our animation. We use the same technique. Adjusting the values to accommodate the end position and plug those values into the css as well. Finally, I place these values in the ‘start’ and ‘end’ parts of the css3 keyframe function. Then we check the animation in webkit. Webkit does the rest of the magic on its own. By using firefox and chrome together I was able to find the start and end points to each body part and then allow @keyframes to fill in the blanks.
Putting it all together
Believe it or not, the biggest road block I encountered when creating this css3 cartoon was switching the scenes at the correct moment to coincide with the css3 animation. I used jquery’s built in delay function to flip through the scenes and activate the next scene. As I’m writing this I realize that I probably could have pulled off the scene switching with css3 animation as well. But I’m not sure – as I haven’t thought it all the way through. We used the built in animation delay function on css3 to begin animating the scenes just as they were activated by jQuery. Another challenge I had was that I had no control over when the animation started. I had to preload all the elements. Because there was no way to start all of the animations on just one click throughout the entire flick. And if all the elements are not loaded when the animations start running it gets jumpy. Including the audio soundtrack was almost too easy. I just inserted a simple html 5 audio tag. (Gosh, I’m falling for html 5). Anthony Calzadilla is a real cool dude at Optimum7.com
Optimum7.com © 2010 All Rights Reserved.
October 11, 2011
196 Comments
Dude!! I can’t believe no one commented on this yet! What an amazing animation you did and I can’t wait to experiment with HTML5 and CSS3 too!
Thank you for the inspiring post!:)
I first watched it on firefox and as it doesn’t move, I thought that you made all the design with CSS3, and I said to myself that’s crazy, how can we make all these lines!
Then I saw it on chrome and I understood.
Anyway, the result is really good, especially when he climbs the wall.
Congrats!
@ Iwani – early bird gets the worm!
Excelente felicitaciones no hay mas palabras
Muchas gracias, amigo.
-A
Very cool! Out of interest, how long did this take to put together?
So amazing! I’ve shared it every possible way that I can.
Great work Anthony! Must have really taken a lot of work and time.
Also I am curious about the weight of it with css, images, js, html and audio?
Amazing. Awesome job dude.
Awesome !!!!!!!!!!!
Also, excellent article about how you created the animation
estimate 80-100 hours, 1/3 was figuring out switching frames, pre-load, etc. 1/3 drawing graphics, the rest animating.
Thanks Jad. Really appreciate you showing it your friends
all the files are about 1.7 megs total…pretty small all things considered.
You deserve the Oscar on that one mate
It just awesome ma, congratz!
wow, i really don’t even know what else to say. that was really out of this world.
Great work. Really shows off what CSS3 and a fair amount of Javascript can accomplish. However, if no one will say it, I will.
80 – 100 hours makes it no easier than doing this in Flash or JavaFX. 1.7MB total weight, still makes it a tad heavier than what might be possible in a well optimized Flash product.
Personally after a whole lot of reading, I am not sure what the goal of CSS3 and HTML5 is meant to be at this point. Is it supposed to provide just an improved document handling system or some major framework for media oriented products? All in all, plugin based RIAs will die at some point, but until then, long live the RIA wars
80-100 hours to do something that really hasn’t been done before. Can you imagine when CSS3/HTML5 are prevalent everywhere, and all the tips and tricks filter down to become standardized design techniques?
Awesome…
Though this is very impressive, and well done…Is this really a consideration to replace flash in the future? Doing something in 80-100 hours that would take 1 hour to do in flash?
Absolutely brilliant job you’ve done mate, congrats. This thing needs to be in the hall of fame of CSS3!
Cool stuff! Interesting too that, despite no Flash there’s still a great deal of Adobe in the process.
That is really kool. Amazing work!!
very impressive. I admire your talents. thank you for reinventing the wheel.
I want to love HTML5 but I can do a much better job in less time in any animation tool and then export it to .mov or .swf
There are a lot of things that were pretty lame on that video. The graphics kept being pixelated and streched. You spent a lot of time making him climb that wall, and it is still a subpar animation.
I know that it is cool that it was done in HTML5, but the bottom line is that it should about the content, not the technology. And with this video you are proving that HTML5 is nowhere near replacing Flash animation. I want to be able to express my ideas in the easiest and best way possible. It seems like I need to be a full-time programmer to do this in HTML5.
masterpiece! just thinking – how difficult would it be to make the character (and it’s individual body parts) mouse controllable? maybe just a bit of jQuery code might do the trick. your next step, dude?
Very nice. What I don’t understand is why hasn’t Marvel come and ask you for money yet.
“80 – 100 hours makes it no easier than doing this in Flash or JavaFX. 1.7MB total weight, still makes it a tad heavier than what might be possible in a well optimized Flash product.”
+1
HTML5/CSS3 < Flash 10.1
Still, a very impressive demo. Very Good work !
HTML is my all-time favourite, and this example you have made proves that version 5 and CSS3 are really bringing new possibilities for us site developers.
Keep up the good work!
@Blogtheristo
Great work. You get extra points for irony if you do The Flash.
Awesome, nice job and very funny ;o)
Unbelievable! This is superbe! Although it doesn’t work in my Firefox Browser, in Chrome it’s … just amazing! Best wishes from here! Roland
Impressive! though this could be done with flash for much less time & effort, your work does imply how too often “trneds” rule our industry.
Just when you thought it was getting easy to block animated ads….
Good work though. Well done.
My spidey sense is tingling, that’s brilliant! Time to get involved with HTML5.
F-ing great work man! I love it and can’t wait to give it a try myself. Nice explanation how you did it too.
ok
i love jquery , I’very happy of html5 but in adobe Flash i was doing that kind of stuff about 2 years ago 
its litte funny
I think we need flash a loot . But I’m happy of html5
This is some slick slick stuff, awesome work!
Even something as basic as this animation, I’m not sure could be comlete in 1 hour in flash.
LOL – Thanks
Even though they’re trending towards bloatware these days, It’d be a bummer doing ANYTHING without photoshop (Adobe)
@cornelius – my pleasure, now that I’m done re-inventing the wheel, I’m going to re-invent lame sarcasm…
bottom line is that this was done with some css3 & webkit animation – NOT flash. If I can get 1 person thinking differently then I have reached my goal.
lol, I’ve actually got something like that in mind
THANKS –
“…version 5 and CSS3 are really bringing new possibilities for us site developers.”
Exactly the point I’m trying to make.
I used to be huge into creating flash animations, I havent opened flash in about 2 years though (I’ve never looked back)
umm, I’m not sure if thats good or bad, but, uh, ok.
Agreed, Mike Davidson says it best in this excellent article (http://www.mikeindustries.com/blog/archive/2010/05/a-good-problem-to-have)
‘When Flash is gone, this overly aggressive marketing will simply be foisted upon you using more “open” technologies like HTML5. And guess what? It’ll be harder to block because it looks more like content than Flash does.’
nah, we dont really NEED it …
with great power comes great responsibility