Oneupweb : So You Want To Learn How To Animate?

Just the other day here at Oneupweb, a fellow developer mentioned that he wished he was able to get into animation. This is something I’ve often heard from other developers who, despite being able to tackle any code-based logic problem hurled their way, balk at the idea of animating something. With the widespread adoption of Flash, growing browser support for the HTML5 , and WebKit’s adoption of CSS3 keyframing demonstrates—a grasp of basic animation principles is only going to become more important as time goes on. With that in mind, I wanted to take the opportunity to share some links to some very useful tutorials for getting started with animation using whichever tool you prefer.

  • LeeMunroe.com – “CSS3 Animations” (WebKit Only)

    This tutorial form Lee Munroe is an excellent example of how simple it is to get started with CSS3 keyframing. Going over the basics of setting up a document, setting appropriate styles, and then actually keyframing the animation. This tutorial demonstrates how easy it is to start experimenting with motion. Later in the tutorial, Lee provides links to some very impressive examples of the types of effects that can be achieved using CSS3 keyframing.

  • Developer.mozilla.org – “Canvas Tutorial”

    The Mozilla Developer Network has an excellent section on the new HTML5 element and the basic principles behind it. Although some knowledge of JavaScript is necessary, the tutorial does a fantastic job of laying the necessary foundation for exploring this powerful new tool in website development. After you finish the tutorial, I wholeheartedly encourage you to continue exploring what you can do with canvas by reading over CreativeJS’s “31 Days of Canvas Tutorials”. http://creativejs.com/2011/08/31-days-of-canvas-tutorials/

  • Entheosweb.com – “Creating A Simple Animation in Flash CS5

    I consider Flash the granddaddy of animation on the web. It’s what I cut my teeth on learning animation, it’s an incredibly powerful tool. This tutorial from Entheos walks you through the basics of setting up the Flash stage, importing assets, and creating a very simple animation that also looks very striking. Although it does require that you have Adobe’s Flash CS5, this is one you can’t miss if you have the application installed on your computer and haven’t taken the opportunity to see just what you can do with it.

Whether you try your hand at just one or all three of the tutorials I’ve referenced above, I hope you consider the role of animation in your future projects. If you’re interested in seeing what animation can add to a website, check out the headers on the Oneupweb home page. Keep up with your audience’s expectations and start building up those skills!

Bonus Link!

For those of you who have gotten past the basics and are looking for something a little more challenging, I wholeheartedly recommend taking the time to tackle “The Walk Cycle”. Idleworm.com has a great tutorial on this…

The Walk Cycle