Animate Your HTML5

A tour of HTML5 animation techniques
with CSS3, SVG, Canvas and WebGL




Codelab part 1 and 2: CSS3 and CSS3 3D

CSS3 have animations built in. Javascript is not required anymore, even for 3D animations.
Codelab duration: 1h + 1h

Codelab part 3: Canvas + Box2Dweb.js

The HTML5 Canvas is the ideal solution when you need to compute the animation frame by frame, for example when using a Newtonian physics model (Box2Dweb.js)

Codelab preparation
Codelab instructions

Demo
Codelab duration: 2h


 Codelab part 4: WebGL + Three.js

Full, hardware-accelerated 3D is now available in Chrome and Firefox through WebGL. Thanks to the Three.js library, there is no need to be a shader expert to obtain spectacular results.

Codelab preparation
Codelab instructions

Demo
Codelab duration: 2h


Codelab setup instructions

  1. Make sure you have a text editor that offers CSS and javascript validation as you type.
  2. Download ans install the latest public version of Chrome.
  3. For the WebGL codelab, you must have a local HTTP server. See instructions here.
  4. Download the ZIP of this codelab.
  5. Unzip it and locate the files named "partXXX playground.html/.css/.js" corresponding to your codelab. They are set up for you to start coding. Follow the codelab instructions in the "codelab-instructions" folder. You will find useful images and textures in the "images" and "textures" folders. Enjoy!

Artwork inspired from "Vibrant" Chrome theme by Fernando Volken Togni
Author : Martin Gorner - Google developer relations - follow me on G+
The code is available on code.google.com
developers.google.com
www.html5rocks.com

➛ A different version of the presentation with a narrower focus on CSS3 and SVG.