HTML5 Animation: Examples and Code from Simple to Complex

Deep down, animation in HTML5 isn't fundamentally different from any other kind of computer graphics programming. You use math to describe objects, and then to describe alterations of those objects. In HTML5, you'll be doing these calculations in JavaScript, and outputting the results to an HTML5 Canvas.

But Canvas opens the animation door to many new web developers -- many of whom haven't done (much or any) animation before, however comfortable they are with JavaScript.

The book Foundation HTML5 Animation with JavaScript is written for such developers -- also for experienced Flash developers looking to head toward HTML5, as Adobe is already doing.

But even without the book, you can browse all the examples, with source code, from how to setup a Canvas, to small necessities like 'listening for keyboard events', to basic animation geometry (will take you back to high school), to specific rendering techniques, basic physics, object deformation, complex collisions, etc.

Simplified TOC:

1. Basic Animation Concepts
2. Basics of JavaScript for Animation
3. Trigonometry for Animation
4. Rendering Techniques
5. Velocity and Acceleration
6. Boundaries and Friction
7. User Interaction: Moving Objects Around
8. Easing and Springing
9. Collission Detection
10. Coordinate Rotation and Bouncing Off Angles
11. Billiard Ball Physics
12. Particle Attraction and Gravity
13. Forward Kinematics: Making Things Walk
14. Inverse Kinematics: Dragging and Reaching
15. 3D Basics
16. 3D Lines and Fills
17. Backface Culling and 3D Lighting
18. Matrix Math
19. Tips and Tricks

Straightforward examples, incremental difficulty, really informative code. Walks you from 'I sort of know JavaScript syntax' to creating squishy, bouncy 3D balls in Canvas.

Definitely worth checking out.