Chapter 8. Animation Demo

It’s time to get your hands dirty! This final chapter walks you through a full animation demo powered by Velocity. In going through the demo’s source, you’ll learn how Velocity’s core features complement one another to greatly improve UI animation workflow. This demo will also introduce you to advanced techniques for working with CSS’s transform properties, which are vital to web-based animation today.

In short, you’re going to put together the skills you’ve accumulated throughout this book to make something really darn cool. Your goals in coding the demo are twofold: use terse and expressive animation code, and ensure maximum performance.


The demo consists of 250 circles floating in, out, and around the screen. ...

Get Web Animation using JavaScript: Develop and Design now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.