s, styled like so…
//...and so on, and so on
Firebug is a web develper’s best friend
The best way to see how these
Lastly, tie it all together with some clever JavaScript that will build and append each of the above
Google doesn’t appear to have a linked library to accomplish this. Instead they have the following script tag located on the page today:
The JavaScript takes the looong array of coordinates, assigned as d, and “paints” a
The brilliance of the animation is that every frame is exactly the height and width that it needs to be to appear as an animated frame. By simply adding the cumulated width and height of all previous frames, the PNG is positioned exactly where it needs to be to show the next frame… adjusted with a clever for loop for “line breaks” in the sprite PNG.
I know this isn’t exactly a tutorial. My apologies to anyone who was looking for copy-and-pasteable code. Hopefully, this at least satisfies someone’s curiosity. And if you need to buy dance wear, our store All Around Dance can help with that too.
Related Articles
Leave a Comment
Trackbacks
Pingback: DoctorPreneur: Do As I Say, Not As I Do | Innovate Arkansas
Pingback: Best Practice does not mean Great | Adam Roderick blog
Pingback: Found on the Web » Sweet Scriptin’, Man
Pingback: Google’s Largest Doodle Yet | World’s Greatest T-Shirt
Pingback: لوگوی امروز گوگل: مارتا گراهام
Pingback: How to Animate The Martha Graham Google Logo for Yourself (Tutorial) | Break Things
Pingback: Design tweets of the week
Pingback: DoctorPreneur – Viral Marketing Doesn’t Work | Innovate Arkansas