Real Animation Using JavaScript, CSS3, and HTML5 Video

11 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Anthony Calzadilla

    Great article. There are a bunch of great tips that I’m definitely going to use in my next CSS3 animation. I’ve found that animating elements using different CSS positioning values results in choppy animation on mobile devices. The solution? The new CSS3 translate() property. I recently fixed a CSS3 animation by converting all the keyframes from positioning to translate(). Thanks again!

  2. Matthew Farag

    I’ve been saying this for years to my fellow designers, but thank you, Dan, for telling the world.

    Animation doesn’t just have to be superfluous eye-candy; metaphor can help make computers seem more familiar and less intimidating to my grandmother.

  3. Quick heads up, the video has a different color profile than the site graphics, making it possible to see the video:

    http://cl.ly/3e3Q

  4. Dan

    Tor – Thanks for the heads up. For this proof of concept, I’m not terribly worried about color issues. For production use, you’ll certainly want to make sure the transition from static graphic to video back to static graphic is as seamless as possible.

    Nicolas – Your guess is as good as mine, although I’d wager that there are some things in production that will soon be released.

  5. Jamy

    Awesome article! I’m definitely going to try something like this out.

    Note: The anchor link which links to http://24ways.org/Scalable takes me to a 404 page.

  6. Ali Lane

    I haven’t read the whole article yet but I’ve looked through all the demo’s. Really smart. The video element is a cracking idea.

    Needless to say, this has been bookmarked for future reference : )

  7. Dustin Hansen

    By far the best article this year! Thanks for an article that exemplifies what I’ve come to expect from 24ways.

    I’ve just begun to test animation with both jQuery and Mootools, and have noticed a very mechanical feel to it, but could never quite put my finger on why. This explains a lot, and I’ll definitely be picking up a book this week. ;-)

    Thanks again, Dan!

  8. Mark

    Very good article Dan. This is a good awareness of what you can do with CSS3. This article made me invest more time in jquery and CSS3.
    Lately I see more and more professional websites using this, so I guess it will be the future of webdesign.

  9. Anurup Raveendran

    Your article was immensely interesting. I’ve been working on Javascript for quite some time. I’m a huge gaming fan as well. I tried to develop a few games using C++ frameworks but they were too resource hungry. I thought I’ll start with lighter frameworks and work my way up.
    By the way the link you posted for the demos is giving a 403 Forbidden error.

    Cheers

Impress us

Be friendly / use Textile