Get the Insider Information on Css3 Animation
Did you know that Wired Magazine (iPad) might be the first publisher to use CSS3 animation as a major design element of a story? The cover story no less!
Ball-sy, eh?
How do I know this? I helped them do it!
The cover story of the June 2011 issue featured a bar graph representing the highest paying jobs in the USA. The idea was to have the text of the article floating over the bar graph. When a user swipes to a page the bar graph animates behind the floated text. (see video)
Working in the Dark
All the code was based on some pretty safe technical assumptions. Being that the screen size for iPads is around 768*1024, we have a good idea of where stuff should go. Because all the contents of the Wired magazine are downloaded prior to reading. We can rest assured that all the elements will be completely loaded and ready to animate the instant the user swipes onto the page. I didn’t have to worry about buggy animation.
There was no easy way of testing my work. The plan-of-attack was that I would write the html/css code in Textmate and they would build their layouts in InDesign. They would import my code and their Indesign layouts into the Adobe Digital Publishing Suite. From there they’d publish to the iPad in some magical way that… I can’t be quite bothered to fully understand yet.